Jump to content

Cover page font size for mobile

Recommended Posts

Site URL: https://gregorylassale.com

I am trying to reduce the font size for the cover page title to make it fit on one line.

IMG_2039.thumb.PNG.8eff0783d6e6da2c115f97e8947c87a3.PNG

 

Here is my code:

<style>
@media only screen and (min-width: 640px) and (max-width: 950px) {
.sqs-slice-heading #sqs-slash-page-header
{font-size: 75px; !important}}
</style>

I'm injecting it locally, not via the custom CSS panel. The breakpoint worked to resize the font on my homepage, so I don't think that's the problem. The selector (.sqs-slice-heading #sqs-slash-page-header) worked for the animation, so I don't think that's the problem either.  Not sure why this media query isn't working.

Help would be greatly appreciated.

 

Link to comment
  • Replies 5
  • Views 696
  • Created
  • Last Reply

I don't get it. I know the selector is correct because the same query works on mobile

@media only screen and (max-width: 640px) {
.sqs-slice-heading #sqs-slash-page-header
{font-size: 33px!important;
}
}

 

I moved the min breakpoint to 641px to avoid conflicting with the code above, but no effect

@media only screen and (min-width: 641px) and (max-width: 950px) {
.sqs-slice-heading #sqs-slash-page-header
{font-size: 45px;!important
}
}

 

I also specified the orientation, but still nothing:

@media only screen and (min-width: 641px) and (max-width: 950px) and (orientation: portrait) {
.sqs-slice-heading #sqs-slash-page-header
{font-size: 45px;!important
}
}

 

 

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.