Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
pearler1570048501

Mobile styling issues on Squarespace 7.1

Question

I'm finding with the new 7.1 version that the way the text is responding on mobile isn't working well for my site.

I've tried the code below on one particular type of text in the Custom CSS editor - when I add it, the preview area doesn't change at all. When I save it, the font I've added elsewhere in CSS breaks.


@media screen and (max-width: 767px) .sqsrte-large {
 font-size: 2rem;
}

I've also tried it on a different one that doesn't have a custom font - .h3 - and the same thing happens - nothing.

Any ideas greatly appreciated!

Edited by pearler
Initial Revision

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0

Hi,

Thanks for the code. I used it and seems to be working for the second line in this header 'Met ABLETON & Logic".

I would be superhappy if you could help me make the mobile appearance smaller of the first line: 'leer produceren', so that the complete word 'produceren' fits on the mobile screen. In the desktop view this text should be as  big as it i right now.

Screenshot_4.png

Screenshot_8.png

Edited by post1

Share this post


Link to post
  • 0
On 2/26/2020 at 12:53 AM, post1 said:

I am also wondering if you have a solution for the mobile appearence of these heading. I would like it to be bigger on mobile.

 

https://coconut-lime-t224.squarespace.com/ password is SS

 

Add this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Leer text */
div#block-eae62f8c0cba7c3d6fd1 h1 {
    font-size: 20px;
}
/* workshops */
div#block-85005aac96fea17a5298 p {
    font-size: 50px;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

Hi

I’m having issues with mobile rendering of forms. It appears that forms and newsletters are styled differently for the mobile in the Merida template (7.1). You can see from the image attached that the text for a standard form is much bigger.  

For reference, this page is also available at http://www.thegoodbits.com/newsletter-1

We want to make both of these form types the same size on mobile. 

thanks and kind regards

Carol
 

71BCA598-AAAE-411B-A9E5-CD4BA0F2724C.thumb.jpeg.a0de0c72288c413bd11caa1e625fedab.jpeg

Share this post


Link to post
  • 0
12 hours ago, Frippet said:

Hi

I’m having issues with mobile rendering of forms. It appears that forms and newsletters are styled differently for the mobile in the Merida template (7.1). You can see from the image attached that the text for a standard form is much bigger.  

For reference, this page is also available at http://www.thegoodbits.com/newsletter-1

We want to make both of these form types the same size on mobile. 

thanks and kind regards

Carol
 

 

Same size for form & newsletter form?


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
On 3/3/2020 at 8:20 AM, Frippet said:

Yes, that's the objective.

Have you solved yet?


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
On 2/27/2020 at 10:16 AM, tuanphan said:

Add this code to Home > Design > Custom CSS


@media screen and (max-width:640px) {
/* Leer text */
div#block-eae62f8c0cba7c3d6fd1 h1 {
    font-size: 20px;
}
/* workshops */
div#block-85005aac96fea17a5298 p {
    font-size: 50px;
}
}

 

 

Het Tuan, 

This great code you gave me (in an answer to my question somewhere above) was working great, but it doesn't work on the header of a copy of that same page. 

My question: I want what I should change in the code if I want this code to apply to a new page (with the exact same header).

Is it the block number I should change?

Thanks a lot in advance!

Share this post


Link to post
  • 0
1 minute ago, post1 said:

 

Het Tuan, 

This great code you gave me (in an answer to my question somewhere above) was working great, but it doesn't work on the header of a copy of that same page. 

My question: I want what I should change in the code if I want this code to apply to a new page (with the exact same header).

Is it the block number I should change?

Thanks a lot in advance!

Use this plugin to find block id. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...