Responsive font style sheet help

Questions › Category: Customization › Responsive font style sheet help
0 Vote Up Vote Down
Sam Gravener asked 3 years ago

Hi I uploaded custom fonts and submitted a support ticket (5 months ago!) because I needed help with where to edit responsive sizes. Support team never replied and I can’t respond on my old ticket hence the new one. 

if you view my site on mobile you can see that the sizing of my script font is off.
can you tell me where/what in the style sheets I need to edit to change the font sizing for mobiles/tablets. I have been trying to resolve this for months! 

Sam Gravener replied 3 years ago

Website is http://www.HereIMumAgain.co.uk

1 Answers
0 Vote Up Vote Down
Jennifer Staff answered 3 years ago

In response to your previous comment on another ticket that font sizing is a support issue. It would be if the theme was left in the original version and not scaling properly. When you alter or modify the theme and need assistance with what you have altered, that is not theme support. That is considered a customization. Fonts and changing of fonts is not theme support.

To help with your issue, this is what stands out when I view the site. Add this to your additional CSS and then be sure to clear your cache. If something is not addressed here that needs modifying please attach a screenshot of the specific spot.

@media only screen and (max-width: 1200px) {
.blog-features .textwidget.custom-html-widget h1,
.image-section-1 h1,
.image-section-2 h1 {
font-size: 4.0rem;
}

.image-section-1 h2,
.image-section-2 h2,
.blog-features .textwidget.custom-html-widget h2 {
font-size: 4.0rem;
margin-top: -70px;
}

.blog-slider .widget_nav_menu .widget-title,
.blog-slider .widget_nav_menu li a {
font-size: 1.8rem;
}

.page.page-template-page_blog .entry-title {
font-size: 2.5rem;
}
}

@media only screen and (max-width: 800px) {
.front-page .content .entry-title {
font-size: 1.8rem;
}

.image-section-1 h2, .image-section-2 h2,
.image-section-3 h1,
.footer-widgets-3 h1,
.front-page .blog .widget-title {
font-size: 4.0rem;
}

.image-section-3 h2 {
font-size: 3.0rem;
margin-top: -60px;
}

.footer-widgets h2 {
font-size: 2.0rem;
margin-top: -40px;
}

.footer-widgets-1 h2::after {
margin: 10px auto;
}
}

@media only screen and (max-width: 500px) {

.image-section-1 h1, .image-section-2 h1,
.blog-features .textwidget.custom-html-widget h1 {
font-size: 3.0rem;
}

.image-section-1 h2, .image-section-2 h2,
.blog-features .textwidget.custom-html-widget h2 {
font-size: 3.0rem;
margin-top: -40px;
}

.home-services .entry-title {
font-size: 1.8rem;
margin-top: -7%;
}
}

Sam Gravener replied 3 years ago

THANK YOU SO MUCH 😀 Now everything loads lovely on mobile and tablet! Honest to god, I’ve been trying to figure it out myself for 5 months with no luck. And when I say support ticket, I mean as in I needed support with what I needed to edit in my theme, in terms of my customisation.

Thank you sooo much! Honestly! Can’t express my gratitude enough right now. You’ve just made my day 😀