[Resolved] layout too narrow on mobile view

[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

[David]

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?

[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

[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.)

[David]

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

[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

[Mark]

David,

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

Mark

[David]

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.

[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

[David]

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.

[Mark]

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

Thanks,

Mark

[David]

You’re welcome

[Author]

Posts