[Resolved] layout too narrow on mobile view

Home Forums Support layout too narrow on mobile view

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #903386
    Mark

    Hi,

    I can’t figure out why my content display is so narrow on mobile view. For example, on my About Us page, the layout looks fine on the desktop, but on the phone (or in mobile view in the customizer) there are very few words per line, almost like the left and right padding is way too big. I’ve tried changing the padding in the customizer (layout view and selecting mobile view for padding), but the padding doesn’t seem to affect the output. Any ideas would be appreciated.

    Thanks

    #903392
    David
    Staff
    Customer Support

    Hi there,

    the content of that page is wrapped in this DIV:

    <div style="padding: 50px 100px 0px 100px; font-size: 1.3em;">
    /// content here ///
    </div>

    You have that page set to Page Builder container > Full Width ( hence i assume the need for the above DIV ). Why not remove the DIV and set the Page Builder container to Default for that page?

    #903398
    Mark

    Hi David,

    Thanks for the tip. I removed the div and set the page header container to default and that took care of the problem. However, the font is too small. The reason I had the div in there was to set the style so I could increase the desktop font size to 1.3em.

    Is there another way?

    Mark

    #903413
    Mark

    I know I can use this CSS

    .page .entry-content {
    font-size: 1.3em;
    }

    to increase the font size, but will this affect mobile as well? (I might want the mobile font size to be different.)

    #903415
    David
    Staff
    Customer Support

    Whats stopping you from just increasing the body font size in the customizer?

    #903418
    Mark

    And, btw, I noticed that on mobile the logo is below the site title. I would prefer to have it above the site title. Is there an option to change this? If I need CSS to do it, can you tell me what that would be?

    Thanks David,

    Mark

    #903419
    Mark

    David,

    I could use the customizer, but I only wanted to increase the font size on this particular page.

    Mark

    #903420
    David
    Staff
    Customer Support

    So to re-order the logo and site title on mobile use this CSS:

    @media (max-width: 768px) {
        .inside-header {
            display: flex;
            flex-direction: column-reverse;
        }
    }

    For that particular block of text you could add back the DIV with just the font size style:

    <div style="font-size: 1.3em;">
    /// content here ///
    </div>

    We can apply it to the entire page but it could effect other elements that you don’t want to change.

    #903423
    Mark

    Thanks!

    How do you get so proficient at inspecting CSS? Are there any courses or tutorials on using web inspectors? I have tried to find something on it for years for Safari, Firefox, Chrome, but haven’t come up with much.

    Mark

    #903428
    David
    Staff
    Customer Support

    You’re welcome.

    We spend a lot of time within the web inspector / dev tools. And know most of the Theme selectors off the top of our heads – Tom definitely does 🙂

    There are quite a few tutorials on YouTube but nothing really compares to doing it over and over and actually constructing in the dev tools themselves.

    #903435
    Mark

    It sure shows. I appreciate your always being so helpful.

    Thanks,

    Mark

    #903440
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.