[Support request] Padding on mobile and tablet

Home Forums Support [Support request] Padding on mobile and tablet

Home Forums Support Padding on mobile and tablet

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2344271
    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

    #2344307
    Fernando
    Customer Support

    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?

    #2344318
    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? πŸ™‚

    #2344321
    Fernando
    Customer Support

    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.

    #2344328
    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 */

    #2344331
    Fernando
    Customer Support

    Try this as well:

    .inside-navigation.grid-container {
        max-width:unset;
    }
    #2344337
    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?

    #2344350
    Fernando
    Customer Support

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

    #2344352
    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

    #2344360
    Fernando
    Customer Support

    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.

    #2344363
    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?

    #2344371
    Fernando
    Customer Support

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

    #2344372
    Justin

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

    #2344631
    David
    Staff
    Customer Support

    Hi there,

    this is what i see on my iphone:

    https://www.screencast.com/t/wUT9mGnPlAiK

    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 ?

    #2344784
    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 πŸ™‚

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.