Domanique Posted November 13, 2019 Share Posted November 13, 2019 I need some help fixing extra padding in between two images on Brine when viewing on a mobile device. The code I am currently using is: . @media screen and (max-width: 640px) { .homepage .sqs-block.image-block:last-child { padding-top: 0 !important; } Although I know this is only targeting the homepage. How can I target my services page (https://www.domaniquejazmindesigns.com/services) as well to get rid of the extra padding in between the two image blocks at the bottom of the page when viewing on mobile? Link to comment
tuanphan Posted November 15, 2019 Share Posted November 15, 2019 1. Target Pad ID. https://beaverhero.com/squarespace-how-to/#How_to_Find_Page_ID 2. Remove padding Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1571906209264_4602 { padding-bottom: 0 !important; padding-top: 0 !important; } } 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
Domanique Posted November 15, 2019 Author Share Posted November 15, 2019 1 hour ago, tuanphan said: 1. Target Pad ID. https://beaverhero.com/squarespace-how-to/#How_to_Find_Page_ID 2. Remove padding Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1571906209264_4602 { padding-bottom: 0 !important; padding-top: 0 !important; } } Thank you! I'm checking out your link on targeting the ID right now 🙂 Link to comment
Guest Posted December 27, 2019 Share Posted December 27, 2019 Gah. Still not working for me for some reason. Huge gap at the end of every section on the mobile version 😞 Link to comment
JonJonJon Posted January 8, 2020 Share Posted January 8, 2020 the padding % value changes how close together they are @media screen and (max-width:640px) { /* remove absolute */ .sqs-block.image-block { padding: relative; } .sqs-block.image-block { padding: 0%; } .sqs-layout .sqs-row .sqs-block:first-child { padding-top: 0px !important; padding-bottom: 0px !important; } .sqs-layout .sqs-row .sqs-block:last-child { padding-top: 0px !important; padding-bottom: 0px !important; } Link to comment
Guest Posted January 16, 2020 Share Posted January 16, 2020 First of all. Thanks a lot for getting back to me. I embedded the code at 0px and it made no difference sad to see. It looks great on desktop (first screen shot) but mobile is terrible (second screen shot). Screen shots below for the first block. Appreciate the ongoing support Link to comment
Guest Posted January 16, 2020 Share Posted January 16, 2020 Could it be because of the shape of underlying image (just a guess) ? Link to comment
JonJonJon Posted January 25, 2020 Share Posted January 25, 2020 not sure, I replied to your email. I'm no expert on this though. But looks like you've got some pretty big padding and/or margins going on, and not a stacked column structure, which the code is intended to target. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.