PEARLERwork Posted September 30, 2019 Share Posted September 30, 2019 (edited) 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 September 30, 2019 by pearler Initial Revision 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
tuanphan Posted September 30, 2019 Share Posted September 30, 2019 @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. Or send to forum message 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
PEARLERwork Posted September 30, 2019 Author Share Posted September 30, 2019 Eek thank you!! 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
PEARLERwork Posted September 30, 2019 Author Share Posted September 30, 2019 Eek thank you!! 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
Marins Posted February 25, 2020 Share Posted February 25, 2020 (edited) 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. Edited February 25, 2020 by post1 Link to comment
Marins Posted February 25, 2020 Share Posted February 25, 2020 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 Link to comment
tuanphan Posted February 27, 2020 Share Posted February 27, 2020 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; } } Marins 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Marins Posted February 27, 2020 Share Posted February 27, 2020 Works fantastic, thanks Link to comment
Frippet Posted March 1, 2020 Share Posted March 1, 2020 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 Link to comment
tuanphan Posted March 2, 2020 Share Posted March 2, 2020 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 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
Frippet Posted March 3, 2020 Share Posted March 3, 2020 12 hours ago, tuanphan said: Same size for form & newsletter form? Yes, that's the objective. Link to comment
tuanphan Posted March 17, 2020 Share Posted March 17, 2020 On 3/3/2020 at 8:20 AM, Frippet said: Yes, that's the objective. Have you solved yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Marins Posted March 26, 2020 Share Posted March 26, 2020 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
tuanphan Posted March 26, 2020 Share Posted March 26, 2020 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 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
Marins Posted March 26, 2020 Share Posted March 26, 2020 3 minutes ago, tuanphan said: Use this plugin to find block id. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Thanks Link to comment
ScieDub Posted April 23, 2020 Share Posted April 23, 2020 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-ploughhttps://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
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 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 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
ScieDub Posted April 24, 2020 Share Posted April 24, 2020 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
ErikaArevalo Posted June 17, 2020 Share Posted June 17, 2020 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 Link to comment
RyanDejaegher Posted June 17, 2020 Share Posted June 17, 2020 @ErikaArevalo do you have a link to the site? I can take a look Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
ErikaArevalo Posted June 17, 2020 Share Posted June 17, 2020 (edited) Hi! @RyanDejaegher The site is still not live/publish yet 😞 -E Edited June 17, 2020 by ErikaArevalo Link to comment
RyanDejaegher Posted June 17, 2020 Share Posted June 17, 2020 @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 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Frippet Posted June 19, 2020 Share Posted June 19, 2020 On 3/18/2020 at 2:03 AM, tuanphan said: Have you solved yet? Nope. Sorry. Didn’t see the notification for this message. Link to comment
tuanphan Posted June 22, 2020 Share Posted June 22, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Frippet Posted June 25, 2020 Share Posted June 25, 2020 https://www.thegoodbits.com - You can't access it? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment