ROBRAS Posted April 20, 2020 Share Posted April 20, 2020 Site URL: https://oval-parrot-2ebm.squarespace.com/ I'm using the BEDFORD templated. The resizing and stacking of graphics on the mobile device looks silly. (I have some small icon pictures below to text on the desktop that are resized to be quite large relative to the text, on mobile) I do want to keep the icons on the desktop version, if possible. How do I create a desktop version that keeps the graphics and a mobile version that omits them or keeps them small? Site is in the process of going live so including screen grabs here. Link to comment
Solution tuanphan Posted April 20, 2020 Solution Share Posted April 20, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#page-5e2b597fafedbe470451a506>.row:nth-child(3)>.span-2 { width: 20% !important; float: left !important; } } ROBRAS 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
ROBRAS Posted April 21, 2020 Author Share Posted April 21, 2020 I did and adjusted the size to 60% and it is looking good, but cannot get it to shift more to center. I am enclosing a sample. Thank you. Link to comment
tuanphan Posted April 21, 2020 Share Posted April 21, 2020 11 hours ago, ROBRAS said: I did and adjusted the size to 60% and it is looking good, but cannot get it to shift more to center. I am enclosing a sample. Thank you. edit above to this @media screen and (max-width:640px) { div#page-5e2b597fafedbe470451a506>.row:nth-child(3)>.span-2 { width: 60% !important; float: none !important; margin: 0 auto !important; } } 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
neones17 Posted December 13, 2020 Share Posted December 13, 2020 Hello @tuanphan, Sorry that I will sound very ignoratant but should I edit anything in the code you've given? I was thinking that maybe I should edit div#page-5e..... section but I am not sure how to do so. Can you please guide? Thank a lot! Link to comment
tuanphan Posted December 13, 2020 Share Posted December 13, 2020 59 minutes ago, neones17 said: Hello @tuanphan, Sorry that I will sound very ignoratant but should I edit anything in the code you've given? I was thinking that maybe I should edit div#page-5e..... section but I am not sure how to do so. Can you please guide? Thank a lot! WHat is your problem? Can you share link to 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
neones17 Posted December 13, 2020 Share Posted December 13, 2020 6 hours ago, tuanphan said: WHat is your problem? Can you share link to your site? Hello, My website is bexconsultancy.co.uk I have the same issue. The icons are big and left positioned and I couldn't use the code you've shared. Link to comment
tuanphan Posted December 14, 2020 Share Posted December 14, 2020 11 hours ago, neones17 said: Hello, My website is bexconsultancy.co.uk I have the same issue. The icons are big and left positioned and I couldn't use the code you've shared. Add to Home > Design > Custom CSS /* resize mobile icons */ @media screen and (max-width:767px) { div#page-section-5fcb8cd9551bdc47e7aa41fb .image-block { margin: 0 auto; width: 30%; } div#page-section-5fcb8cd9551bdc47e7aa41fb * { text-align: center; } } 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
LotNotes Posted December 14, 2020 Share Posted December 14, 2020 @tuanphan you are very nice sharing your knowledge. Can I know how you get the page-section- info? like the last message you posted, I see the large combination of numbers and letter is different for sites. Thanks. 5fcb8cd9551bdc47e7aa41fb Link to comment
derricksrandomviews Posted December 14, 2020 Share Posted December 14, 2020 There is a Chrome extension that identifies Squarespace blocks. A block has a number similar to the one posted. It takes some experience to know which block id is added to the code, use the wrong one on a page and at best the code will not work, at worse, the page breaks, ie cursor won't do anything, page won't scroll things like that. . LotNotes 1 Link to comment
neones17 Posted December 14, 2020 Share Posted December 14, 2020 9 hours ago, tuanphan said: Add to Home > Design > Custom CSS /* resize mobile icons */ @media screen and (max-width:767px) { div#page-section-5fcb8cd9551bdc47e7aa41fb .image-block { margin: 0 auto; width: 30%; } div#page-section-5fcb8cd9551bdc47e7aa41fb * { text-align: center; } } You, sir, are amazing! Thanks a lot for this! Link to comment
tuanphan Posted December 15, 2020 Share Posted December 15, 2020 17 hours ago, LotNotes said: @tuanphan you are very nice sharing your knowledge. Can I know how you get the page-section- info? like the last message you posted, I see the large combination of numbers and letter is different for sites. Thanks. 5fcb8cd9551bdc47e7aa41fb Try https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en or https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde LotNotes 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
heiiidii Posted April 18, 2022 Share Posted April 18, 2022 (edited) Hello @tuanphan, my unpublished site does the same with small icons - correct size on a desktop but then on the mobile, it blows up - please see the backpack below. Have tried the code above with my block id but no luck ... on mobile view Thank you so much for your help! Edited April 18, 2022 by heiiidii Link to comment
tuanphan Posted April 22, 2022 Share Posted April 22, 2022 On 4/19/2022 at 12:42 AM, heiiidii said: Hello @tuanphan, my unpublished site does the same with small icons - correct size on a desktop but then on the mobile, it blows up - please see the backpack below. Have tried the code above with my block id but no luck ... on mobile view Thank you so much for your help! Hi. Please share link to your site. If the site is trial/private, just setup password & share url. We can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment