Mobile is unresponsive/page titles not scaling

[derleon20]

Hi,
I am working on Academy Pro theme and the post/page titles are not responsive on mobile. The words are cut off and the titles and images are not adjusted to the width of the screen. I would appreciate any suggestions.

Thanks, HD

http://themedcircle.com

[Victor Font]

You have to adjust the padding and font-size in the media queries. You'll have to experiment with the size yourself until you find dimensions that are pleasing to your eye. If you use your browser's built in inspection and mobile design tools, I'm sure you'll discover the right look.

Right now, the left and right padding for .content .post.entry .entry-title is set to 40px at line 2568 in style.css in this CSS:

.content .post.entry .entry-title, .content .post.entry .entry-meta, .content .post.entry .entry-content, .full-width-content .content .entry .entry-title, .full-width-content .content .entry .entry-meta, .full-width-content .content .entry .entry-content {
	padding: 0 40px;
}

You'll have to experiment with the different screen widths available to you in the browser inspect tool to find the size where the padding looks right. Then, copy the above block to the media query nearest to the size of the screen you are experimenting with and change the padding. You can also change the font size in the same media query.

This will help get you started with your inspect tool: https://victorfont.com/how-to-use-your-browsers-inspect-tool/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[derleon20]

It worked, thanks for your help.

[Author]

Posts