Post Content Showing Up Large on Mobile

Your theme is missing an important (for mobile devices) viewport meta tag in the header. A common one is <meta name="viewport" content="width=device-width, initial-scale=1">

Unless you developed your own theme, it’s best to create a child theme to contain any theme alterations.

Hey,

I added the veiwport meta tag and when I did it made the actual post content huge and unable to scale down, which is what I’m having trouble fixing. I currently removed the meta tag until I can figure out how to fix the size of the actual post content.

So once I add the viewport back how can I get the content to size down for the appropriate screens?

Thanks.

Ah, I see. I’m not sure why it’s so large, but to allow users to scale the view, you need different viewport arguments. I’m not sure what that might be, but you should be able to find the right ones by searching.

Probably a better solution would be to have a CSS media query with the right styles so the view is correct to begin with. I can help figure that out but the viewport meta tag needs to be in place first.

Okay, thank you so much! I’ve set the viewport now, using the one you suggested above. I don’t know a ton about media queries so any help you could provide would be much appreciated.

Thanks!!

Your site doesn’t look so bad to me on mobile. This image is 2/3 scale:

View post on imgur.com

There is definite room for improvement, but while things could be smaller, they don’t seem particularly oversized to me. Don’t forget a lot of people do not see so well, so large type may be appreciated!

A media query on a CSS stylesheet is basically like this:

@media screen and (max-width: 767px) {
    div.recent-posts2 {
        width: 99%;
    }
    /*more rules as needed*/
}

The rules within will only apply to screen widths no more than 767px wide in this example. The mobile emulator that is part of Chrome developer tools works pretty nicely. I believe all major browsers have something similar. Learn your way around the tool of your choice. It makes identifying which styles apply to what very easy and lets you experiment with different styles and selectors. Your changes in the tool will not persist. You can reset to the original styles by reloading.

In Chrome developer tools, the mobile emulator is toggled on and off by the overlapping rectangles icon at upper left. The square with arrow icon turns on the element selector tool. Pick the element on your page you want to inspect. On the main window you can pick different devices to emulate and toggle between portrait and landscape. The blue bar at top shows your theme’s media query breakpoints. You should try to use the same breakpoints for your media queries.

Once you decide which rules you want, copy them to where ever your theme lets you place custom CSS. This is often in the customizer. Create a media query there, then paste your desired styles inside.

I see in the above picture that it looks okay, but when you actually click on the image or heading to go to the full post the actual images and content are huge. That’s what I’m having trouble getting to size properly. I’ve played around with the code you posted above and still can’t seem to get the actual post to shrink down. Is that something you could help with?

I’ve just figured out how to fix the size issue of the single posts. Thank you so very much for your help. It was exactly what I needed and helped me solve this problem.

Awesome! I guess you did say “blog post” singular. I somehow didn’t relate that to the single post page. It all worked out I guess ??