Jump to content

Alter font size in one section for mobile and desktop

Recommended Posts

Site URL: https://dove-gerbil-lksj.squarespace.com/

I would like to edit the font size for some H2 text on the home page. I've used this HTML code to edit the font size: 

<h2 style="font-size: 55px !important;text-align:center;">YOUR HOME FOR YOUTHFUL, RADIANT SKIN</h2>

Which looks great on desktop, however, on mobile, the text is far too large. I would like to be able to set a specific size for this text on mobile (without affecting the rest of the page/site). 

I tried adding this custom CSS which targets the font size for that particular section of the page using collection ID: 

@media screen and (max-width: 640px) 
{#collection-602a0859e785d50698eb3bb5  h2 {
font-size: 40px;}}

However, this doesn't affect the text that I need it to (it only works for H2 text using a text box). 

Does anyone know how to set a specific text size for desktop and mobile without affecting any other sections on the page/site? 

Screen Shot 2021-04-23 at 8.51.17 am.png

Screen Shot 2021-04-23 at 8.51.27 am.png

Link to comment
  • Replies 1
  • Views 646
  • Created
  • Last Reply

Hi,

Edit your h2 to this

<h2 class="h2text" style="font-size: 55px !important;text-align:center;">YOUR HOME FOR YOUTHFUL, RADIANT SKIN</h2>

Next, add this to Design > Custom CSS

@media screen and (max-width:767px) {
	h2.h2text {
	font-size: 30px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.