Jump to content

Adjusting font size Mobile only

Go to solution Solved by paul2009,

Recommended Posts

Hi,

We designed a website and now would like to adjust the font size of the mobile view only. This is not support by Squarespace out of the box as far as I understood, however I read I should be possible with custom CSS adjustments. I am looking to adjust for example some of the paragraph text.

I tried some custom CSS found here on the forum with the likes of:

 

@media only screen and (max-width: 640px) {
  p {
      font-size: 8px;
  }
}

However have no in-depth knowledge about custom CSS, is there anyone who has another suggestion on how this can be done?

Much appreciate in advance for reading this far, any feedback/help is welcome.

Thanks!

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

4 minutes ago, StoikStijn said:

Hi,

We designed a website and now would like to adjust the font size of the mobile view only. This is not support by Squarespace out of the box as far as I understood, however I read I should be possible with custom CSS adjustments. I am looking to adjust for example some of the paragraph text.

I tried some custom CSS found here on the forum with the likes of:

 

@media only screen and (max-width: 640px) {
  p {
      font-size: 8px;
  }
}

However have no in-depth knowledge about custom CSS, is there anyone who has another suggestion on how this can be done?

Much appreciate in advance for reading this far, any feedback/help is welcome.

Thanks!

May be another Css styles, which has higher priority, overwrites your Css style.

You can try adding !important to your code to make it highest priority

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, Beyondspace said:

May be another Css styles, which has higher priority, overwrites your Css style.

You can try adding !important to your code to make it highest priority

Thanks for your reply!

I have tried adding the !important to the code unfortunately does not seem to budge, also tried it with another piece of code:

 

@media only screen and (max-width: 640px) {
// Paragraph
 p {font-size:1rem !important} 
}

Tried to change the 'rem' to any value but still do not see any difference on the mobile site. Possibly any other suggestions? Or anything I can show/supply to better understand the currant state?

Thanks!

Link to comment
On 12/5/2022 at 7:27 PM, StoikStijn said:

Thanks for your reply!

I have tried adding the !important to the code unfortunately does not seem to budge, also tried it with another piece of code:

 

@media only screen and (max-width: 640px) {
// Paragraph
 p {font-size:1rem !important} 
}

Tried to change the 'rem' to any value but still do not see any difference on the mobile site. Possibly any other suggestions? Or anything I can show/supply to better understand the currant state?

Thanks!

What is your site url? I think your CSS box has an error so above code doesn't work.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 12/10/2022 at 4:05 AM, tuanphan said:

What is your site url? I think your CSS box has an error so above code doesn't work.

sawfish-raccoon-xkes.squarespace.com

This is the site URL, there is indeed an error in the CSS box but can't seem to understand what the error is.

Schermafbeelding 2022-12-19 om 19.17.53.png

Edited by StoikStijn
Link to comment
  • Solution
2 hours ago, StoikStijn said:

This is the site URL, there is indeed an error in the CSS box but can't seem to understand what the error is

The content within the yellow box on line 5 is incorrect.

It should include the name of a font that has already been installed or downloaded. If you need to specify a URL for the font, you should use an @font-face rule first. You cannot include a URL in the line where the font-family property is specified.

image.thumb.png.c9ebe40eb3a65c70e2b2b84336020f3b.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.