Adjusting font size Mobile only

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!

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

Reference:

https://www.thebookdesigner.com/styling-priorities-css-for-ebooks-3/

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

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!

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.

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.