Jump to content

Mobile styling issues on Squarespace 7.1

Recommended Posts

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!

Link to comment
  • Replies 29
  • Created
  • Last Reply
  • 4 months later...

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

Link to comment
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 2 weeks later...
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!

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

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. 

Link to comment

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

 

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. 

Link to comment
  • 1 month later...

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.