Your cart is currently empty!
Homepage › Community Forums › Guru Theme Support › Responsive font size
Hi Wes,
Is there a way to have the text on the home page not quadruple in size when viewing on a mobile device? Having the font appear in what ends up looking like 100px on the home page when viewing on my iPhone means I have to scroll an awful lot to get to the bottom of the home page, then scroll all the way back up to get to the menu.
Terri
Which part of the homepage are you trying to change? Your site is in Maintenance mode so I’m unable to view the exact line to change, but if you can let me know which section then I can give you the code to add in your responsive section.
Just about every part of the home page, but mainly in 2 places. Is there a way I can send you a screenshot? If not, here are the 2 main sections that need adjusting on iPhone (at least on iPhone 6).
In the first section, directly below the slider, that space gets stretched way out so that you end up with a LOT of space/background image showing up below the “Dates: To be Announced” and “healing….”
In the section with “Carols by Candlelight Needs Donors…..” the title is too large. It looks like an 80pt font size. The content below that also looks doubled in size. Same for the font size in the “A Truly Unique Venue” section.
This isn’t the only responsive theme where I’ve run into fonts doubling in size when viewed on a smart phone. I’ve not been able to figure out how to keep the font sizes from doubling when viewed on smartphones.
Terri
Try changing this on line 1815 under the 1023 Width
area in your Responsive CSS from 60px to around 40px (or less if you want to reduce more)
.image-section h2,
.solid-section h2 {
font-size: 40px;
}
It’s currently at 60px, so reducing it should work. It’s because you’re using the h2
tag….which is supposed to be a little larger than the h4
tag. You can still use it in those sections, we just need to adjust the CSS which is pretty easy to do.
The h2
is for large titles, and the h3 and h4 get smaller and smaller (in most cases). We can still easily adjust the sizes instantly so it’s a quick fix if needed.
I was testing out the h2 in that area to see if that would make it smaller than the h1 when the title was placed where it’s supposed to be in that widget.
Reducing it down to 40 makes it look much better on my iPhone. I’m curious as to why it was 60px. I’ve noticed a lot of responsive themes use extremely large font sizes.
Any idea how to shorten up that HUGE gap between the “Dates To Be Announced” and the “Healing & Hope…” sections when viewing on iPhone.
I don’t see the “Healing & Hope” section you’re referring to….Did you make some changes?
Line 1123 is where that other section you were referring to can be edited –
.solid-section {
background-color: #fff;
padding: 140px 0 120px;
}
I did, yes. It now reads “Carols and Rady…” It’s in Front Page 2.
The padding in that solid section is fine. It’s the background image in Front Page 1 that becomes too long when viewing on iPhone, creating a large gap below the slider and above the headline in front page 2.
Let me know if you’re able to view that last reply I did. It’s set to private, but I just want to make sure it still allows you to see it.
Sorry about that! I really need to figure out why my forum notifications aren’t working. Sometimes I get an email, and sometimes I don’t. I just happened to check here to see if you got everything working.
Anyways, there is code that makes the first frontpage widget stretch/adjust to the browser. It looks like you won’t need to use it for what you’re trying to do. To remove this feature go to your front-page.php file and remove this line –
wp_enqueue_script( 'guru-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' );
It should be around line 23.
Let me know once you do that. If you need to reduce more space we can do so by adjusting the padding. Just let me know.
Checking in to see if you got everything working?
Thank you for the follow-up, Wes,
I’m so sorry for not getting back to you sooner. Between WooCommerce issues on another site (I HATE All Things Woo!!), a Google hack warning on yet another site, and 2 new sites to get launched this week, I’ve barely had time to eat/sleep. I’ve not had a chance to remove that line of code, and my client has not replied to any of my emails the past couple of weeks.
Will get back to this ASAP.
Terri
P.S.(And completely off topic) Can you recommend someone well versed in WooCommerce?
I don’t know anyone in particular. I’ve been using it since it came out years ago for this site, but I wouldn’t call myself an expert. What are some of the issues?
For less space, add this in the responsive section of your css (try in the 550px width section) –
.front-page-1 .image-section {
padding: 40px 0;
}
Then you can make your adjustments as needed.
If you want me to add it in and check it for you, let me know (just create a Temporary Password if so). I can definitely reduce space, and get it done quickly if I have access to the site/code itself.
Just let me know!
Thank you, Wes,
I had to launch the site over the weekend. I’m going to hold off a bit making any additional changes until after someone else mentions the spacing on their own smartphones/tablets.
I’m currently waiting for their new logo. Speaking of which, how do I stop the logo from downsizing once you start scrolling down the page?
Terri
Cancel that question regarding downsizing of the logo. I commented out:
/*.header-image .light .site-title > a {
height: 56px;
}*/