How do I design such layout?

This topic has 21 replies, 3 voices, and was last updated 3 years, 11 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
May 18, 2020 at 4:35 am #1289838

vanya

Hello guys
Hope you are all fine.
I need help with designing such blog layout on mobile
I have attached a picture

May 18, 2020 at 5:06 am #1289878

David
Staff
Customer Support

Hi there,

do you have a site already setup that i can see? Then i can advise on the changes you need to make.

May 18, 2020 at 6:47 am #1290044

vanya

I have updated the link in the website url
Please refer it
It is a blogger theme template but i am sure u guys can help me acheive that design with generatepress

May 19, 2020 at 5:41 am #1291734

vanya

Any luck guys?

May 19, 2020 at 7:18 am #1291887

David
Staff
Customer Support

Hi there,

sorry – your last reply slipped through our system.

Do you already have a site setup with a blog using GP?
Its much easier for me to provide a solution from your current set-up.

May 20, 2020 at 4:31 am #1293534

vanya

I don’t have a live blog yet but I will create one and let you know quickly 😀

May 23, 2020 at 11:02 am #1298358

vanya

So, I have created a site ( https://stveig.tk )

I need mobile view design like this site ( https://minifast-templateify.blogspot.com )

This is the blog layout (https://prnt.sc/smgad5) I want to achieve on https://stveig.tk

Please help guys 🙂

May 23, 2020 at 4:52 pm #1298596
Tom
Lead Developer
Lead Developer
Hi there,

Try adding this CSS:
```
@media (max-width: 768px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .main-navigation.has-branding .menu-toggle {
        order: 1;
        margin-left: 0;
    }

    .main-navigation .mobile-bar-items {
        margin-left: auto;
    }

    .entry-summary {
        display: none;
    }

    body:not(.post-image-aligned-center) .inside-article .post-image {
        float: left;
        max-width: 150px;
    }
}
```
Then you’ll want to move the featured image to above the title: https://docs.generatepress.com/article/adjusting-the-featured-images/
May 24, 2020 at 11:40 am #1299606

vanya

Please check the site now https://stveig.tk

I added the above code and also minimized the size of featured images but the featured image size is also getting changed on desktop view. I need separate featured images size on mobile.

Also, please help me with the padding code for mobile, this is what i would like to reduce https://prnt.sc/smy9io

May 25, 2020 at 3:26 am #1300231

vanya

Any luck?

May 25, 2020 at 5:21 am #1300329

David
Staff
Customer Support

The image size you require for desktop, is it much larger than the mobile version? If it isn’t can you change the Featured Image size to the Desktop size you need

May 25, 2020 at 7:41 am #1300525

vanya

I think you’re suggesting me something else than what I need.
I got some code from your previous topics and I tweaked a site bit.
Please go to https://stveig.tk and see how it looks.
Now, I want to increase the width of the featured images on desktop view.
Please help with the code.

May 25, 2020 at 9:20 am #1300816

David
Staff
Customer Support

In the Featured Images:

https://docs.generatepress.com/article/adjusting-the-featured-images/

You can select a Media Attachment size – i suggest you select Medium which defaults to 300px. Then in he width and height settings, delete those sizes.

I can then provide the CSS to make it work.

May 25, 2020 at 10:24 am #1300898

vanya

Thanks. I did what you suggested. Please check https://stveig.tk

Now, I want mobile blog archive layout to look like this > https://prnt.sc/snk3gb

Please help with CSS code 🙂

May 25, 2020 at 3:53 pm #1301253
Tom
Lead Developer
Lead Developer
Try adding this:
```
@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image img {
        height: 75px;
        width: 100px;
        object-fit: cover;
        border-radius: 3px;
        margin-right: 10px;
    }
}
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] How do I design such layout?

Popular Articles

Start building better websites today.