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

Mobile styling issues on Squarespace 7.1


pearler1570048501

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

Recommended Posts

  • 1

@pearler your code is invalid. The code must be


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

Tuan Phan - Squarespace Developer

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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
  • 0

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.

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
  • 0

 

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

Create an account or sign in to comment

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

×
×
  • Create New...