How do I design such layout?

Hi there,

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

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

Any luck guys?

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.

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

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 :)

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/

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

Any luck?

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

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.

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.

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 :)

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;
    }
}