Site logo

Archived topic

Can´t change layout padding for desktop & tablet separately

9 replies · Started by Oliver on August 13, 2021

Viewing posts 1–10 of 10

Whenever I change the desktop padding for header and footer (Customize/Layout/Header & Footer), the tablet padding is also affected.

Hi there,

the Theme only provides padding options for Mobile ( upto 768px wide ) and Desktop which is anything larger.

If you need to modify it for other sizes then it would require CSS.
Let me know if you need help with that.

Hi david!
The padding values for the footer and header, right and left are set to 0 because they are aligned with a secondary navigation bar below the header, which has a different color. If I could add padding to the colored area of the secondary navigation with css instead, it would probably be a better idea.

Hi Oliver,

Can you try to set up paddings for the elements on the desktop?

Then we can have a look to see what CSS is needed to tweak the tablet layout.

Let me know :)

Thanks Ying, I added 30 px padding to the left and right of the header and footer and 30 px padding to the left of the content on Dektop.

Now we need to shrink the sidebar to align with the header, content and footer.

I noticed that the right sidebar should actually also get 30 px padding in order to also have have a white space to the right, on tablet view.

I see, looking at your site, I find using one container might be a better option than the separate containers.

So the paddings for content will apply to both the main content and the sidebar.

Can you give it a try? :)

You are right Ying it works perfectly. Now we just need to shrink that navigation bar to match the rest of the elements

Give this CSS a try, the max-width was 1000px, now it minus 2 * 30px.

nav#secondary-navigation {
    max-width: 940px;
}

Let me know :)

Thanks a lot Ying, that worked! Have a nice day!

Great! You too, have a nice weekend :)

This archived topic is closed to new replies.