[Support request] Padding on mobile and tablet

[Justin]

Hey,

My padding on mobile and tablet seems to have been lost on posts:
https://humanhealth.je/empowered-by-your-food/

In customiser – layout – container – content padding. I have 20px padding set. I also have a layout element making posts 800ox wide, which aplies to desktop.

But I’m not sure why my mobile and desktop padding has dropped out? The page actually loads with the padding for a second, then they loose their padding.

Turing off the post layout element fixes the issue. But then makes my posts the full container width.

So, how can I set my posts to have a 800px container on desktop, and retain their padding on mobile? I don’t want to change the sitewide width to 800 as it makes my header contained and not full width.

Thanks for your help

[Fernando]

Hi Justin,

In Appearance > Customize > Layout > Container, can you check the Content Layout setting, if it’s set to One Container? If not, can you try setting it to that?

[Justin]

Hey, it is set to separate containers. But setting as single containers doesn’t resolve the issue.

When I set as single container, the padding / margin at the top of the page is lost.

Is there a best practice for setting the width of posts and post padding?

I have an element layout set up, with these settings:
Content Area – Contained (no padding)
Content Width – 800 px

When I disable that, the issue resolves. But, then my posts are full width on desktop.

I can set the content width in the customiser, but then my header becomes contained.

So I assume the solution is to delete the element, set the page container in customise-layout to be 800px wide, and find a way to then ensure the header goes full width?

If that makes sense? 🙂

[Fernando]

Yes, that makes sense.

Yes, you’re suggested solution is one approach to do it. Then, we can unset the max-width for the Header with this CSS:

.inside-header.grid-container {
    max-width: unset;
}

You may add this in Appearance > Customize > Additional CSS.

[Justin]

That works perfect for the blogs, but the CSS doesn’t work for my header. For ref, I am using the following code to centre the header and this is the site:

https://humanhealth.je/

/* Centre logo */

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}
}
/* Centre logo */

[Fernando]

Try this as well:

.inside-navigation.grid-container {
    max-width:unset;
}

[Justin]

Perfect thank you 🙂

I have one other thing on this site. When I view on desktop, all heading fonts have the correct 500 weight applied. But on mobile, they seem to have started to default to 900 weight.

Any idea what could be causing that?

[Fernando]

Can you point us to an example Heading in your site so we can observe the issue?

[Justin]

https://humanhealth.je/what-is-chiropractic/

If you look on mobile (I am using chrome on an iPhone) all headings are around 900 weight. Including all of the navigation.

On desktop, they are how they should be, 600

[Fernando]

I see. It seems to be 600 on my end on mobile as well/ Can you try clearing your browser’s cache? If that doesn’t work, try viewing it on a different device.

[Justin]

When I check mobile on my computer, it appears fine.

But when I check on my phone on safari and chrome, all titles display at 900. I have also tested on other devices and cleared cache. It is odd as this arose recently.

Also, on safari, pages seem to have 20px margin off the side?

[Fernando]

Have you tried on a different device? Does the issue occur there as well?

[Justin]

Hey Fernando – yes I tried on a friends iPhone – same issue

[David]

Hi there,

this is what i see on my iphone:

I used the Safari Developers tools to duplicate one of the headings.
The second heading is the original and i leave that as font-weight 600
The first heading i toggle between 600 and 900 font-weights.

There is a difference, although Poppins doesn’t make a big show of it.

How do the font-weights on my screen recording compare ?

[Justin]

Hey David – it appears on your phone as it does on mine. Very bold. Here is a link to how it should display and how I view it on desktop:

https://www.dropbox.com/sh/pfkj5bl5k4chr38/AADz4IKq8yqT6XlYr9I9qF_Ya?dl=0

Thanks for your help 🙂

[Author]

Posts