Responsive font size

This topic has 19 replies, 2 voices, and was last updated 8 years, 2 months ago by Terri.

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
January 18, 2016 at 12:47 pm #17031
Terri
Customer
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
January 18, 2016 at 7:52 pm #17034
Wes
Moderator
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.
January 18, 2016 at 8:33 pm #17035
Terri
Customer
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
January 19, 2016 at 8:55 pm #17037
Wes
Moderator
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.
January 20, 2016 at 12:29 am #17038
Terri
Customer
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.
January 20, 2016 at 10:25 pm #17046
Wes
Moderator
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;
}
```
January 21, 2016 at 1:35 am #17047
Terri
Customer
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.
January 24, 2016 at 10:24 am #17054
Wes
Moderator
This reply has been marked as private.
January 24, 2016 at 10:27 am #17055
Wes
Moderator
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.
January 24, 2016 at 12:08 pm #17056
Terri
Customer
This reply has been marked as private.
January 28, 2016 at 9:25 am #17067
Wes
Moderator
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.
January 31, 2016 at 9:05 am #17110
Wes
Moderator
Checking in to see if you got everything working?
January 31, 2016 at 11:54 am #17113
Terri
Customer
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?
January 31, 2016 at 6:44 pm #17118
Wes
Moderator
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?
February 6, 2016 at 12:39 am #17159
Terri
Customer
This reply has been marked as private.
February 9, 2016 at 6:56 pm #17179
Wes
Moderator
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.
February 11, 2016 at 12:18 am #17188
Terri
Customer
This reply has been marked as private.
February 11, 2016 at 4:24 pm #17262
Wes
Moderator
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!
February 15, 2016 at 1:17 pm #17267
Terri
Customer
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
February 15, 2016 at 1:29 pm #17268
Terri
Customer
Cancel that question regarding downsizing of the logo. I commented out:

/*.header-image .light .site-title > a {
height: 56px;
}*/
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.