Mobile styling issues on Squarespace 7.1

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!

@pearler your code is invalid. The code must be

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

Tuan Phan - Squarespace Developer

Eek thank you!!

Eek thank you!!

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.

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

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;
}
}

Works fantastic, thanks

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
 

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?

12 hours ago, tuanphan said:

Same size for form & newsletter form?

Yes, that's the objective.

On 3/3/2020 at 8:20 AM, Frippet said:

Yes, that's the objective.

Have you solved yet?

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!

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

3 minutes ago, tuanphan said:

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

Thanks

I have two queries that someone might be able to help me with:

1. The captions are jumping to a larger size in the mobile version of the site below.
Here are two page examples:
https://www.jamese.ie/works/starry-plough
https://www.jamese.ie/bio-cv
What is the css code to get around this issue or decide what the point size should be?

2. I would like to reduce the size of the footer links in mobile version, what is the css code for this?

Thanks in advance for any help with this. 

Q1. Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .image-caption * {
    font-size: 18px !important;
}
  }
</style>

Q2.  Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-d5586d2c202ca4993eaf a {
    font-size: 16px;
}
}

Quote

 

 

 

Q1. Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .image-caption * {
    font-size: 18px !important;
}
  }
</style>

Q2.  Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-d5586d2c202ca4993eaf a {
    font-size: 16px;
}
}

Thats brilliant, worked an absolute charm.
Thanks very much for your help. 

Hi! 

I'm having issues centering the content(text and social media button) in the mobile view for 7.1. In the desktop view it's fine put on the mobile version it changes. 

Does anyone know a css code that could fix this ? 

Thanx in advance for the help! 

-E

@ErikaArevalo do you have a link to the site? I can take a look

Hi! @RyanDejaegher

The site is still not live/publish yet 😞

-E

@ErikaArevalo no worries you can create a site wide password to share access before it's published live

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

On 3/18/2020 at 2:03 AM, tuanphan said:

Have you solved yet?

Nope. Sorry. Didn’t see the notification for this message. 

On 6/19/2020 at 6:49 PM, Frippet said:

Nope. Sorry. Didn’t see the notification for this message. 

I can't access your site 

https://www.thegoodbits.com - You can't access it?