Upfront site has a margin/padding issue I can't find

This does not have to do with the builder in particular - but a theme I built with the builder.

Strange thing happening. The site on a mobile device shows a gap at the right side. It does not go full width of a smart phone in portrait - but it does in landscape. It is also full width on tablets and desktops. I have checked in the formatting and can't find anything in the mobile section that would cause this and it doesn't show up in the editor. I'm at a total loss.

I have granted access. For the life of me I just can't see where the issue is stemming from. Would love some input.

Thank you so much!

  • Majid

    Hey Tammie,

    Hope you are doing great today !

    I took a look at your website mobile version and I found out that there was a H1 tag that has a font-size of 75px and not responsive.

    We can fix that by adding this line of code to that region custom css.
    This means that the H1 will have a font size of 50px when the device width is under 430px.

    @media (max-width: 430px) {
    div#page .upfront-output-region-container .upfront-output-module .letter .plain-text-container h1 {
      font-size: 50px;
    }
    }

    Let me know if this helps.
    Cheers,
    Majid

  • Tammie

    Thank you for this information. Sorry for the late reply but I was out of town.

    I can understand the logic in the information you provided and honestly I'm not sure how I missed the text. I guess I didn't scroll down far enough.

    My issue is that I have attempted to place the code in to the page and it does not stay there. When I'm in responsive mode so that I can see the different layouts while responsive, I click on the 'edit region' and then click on the 'Edit Preset CSS' to add in the code. I paste it in there and save, but when I open it again it is no longer there. It does not stay in the page. I was able to paste it into the main theme 'Global theme CSS' and it stays there, but it does not seem to make a difference on the loading of the page on a mobile device.

    I realize this works a little differently because we are using a custom font that is not Google that can not be added in to the theme, therefore the mobile formatting and such does not work in the same was as it would if we were using a font like Arial.

    I just realized that I posted this issue previously with no resolve. I had forgotten about it and named it something different so I didn't find it when I was searching out a solution to this issue.

    https://premium.wpmudev.org/forums/topic/setting-custom-font-css-for-activ-breakpoints

    For now I have just reduced the size of the font to accommodate, but would love a solution so that the different sizes of pages can have an appropriate text size.

    Thanks for your insight!

  • Nahid

    Hey Tammie !
    Hope you are doing well today and please excuse the late response.}

    I tried using the CSS my colleague Majid suggested in developer tools and it works for me. If you can add it to the Global CSS, it'll also work. Perhaps a caching issue? It can be a CSS override issue too by !important notations. Please try adding the code again to Global CSS and let me know when you're done. Make sure you clear all cache after the process.

    Thanks!

    Regards,
    Nahid.