AIX Posted July 16, 2020 Share Posted July 16, 2020 Site URL: http://www.aldanx.com Hi, I'm having issues. I am using custom CSS, to enable full-bleed content on the mobile version of my site. Yet, there's still an apprx. 2px gap on the left and right side of all content. My intent, was that there be no gap on either side, whatsoever. Here is the code I am using: @media screen and (max-width:800px) { .sqs-layout .sqs-row .sqs-block{ padding-left: 0 !important; padding-right: 0 !important; } I've attached a mobile screen recording to show you what I mean. In it, I'll scroll up and down, and pinch the entire page to give context. This may sound silly, but I've even tried using a negative padding measurement i.e. "-10" to no avail. Full width, should mean exactly that. But I guess I'm living in the twilight zone. If anyone out there can help, I'll greatly appreciate it. FFW.m4v Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 Your video blocks are wider than the screen. Theres a 20px padding that is offsetting that, but its too much, and varies with different screen widths. Best fix is to fix the vid block width. Link to comment
AIX Posted July 16, 2020 Author Share Posted July 16, 2020 Does anyone else have actionable steps toward a solution? Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 REPLACE THIS: #pageWrapper { padding: 20px !important; } WITH THIS: .sqs-layout > .sqs-row { margin-left: 0 !important; margin-right: 0 !important; } Link to comment
AIX Posted July 17, 2020 Author Share Posted July 17, 2020 I can't "replace" something that doesn't exist. This is nowhere in my code: 18 hours ago, rwp said: #pageWrapper { padding: 20px !important; } Again, if anyone else out there has a solution, please let me know. Link to comment
rwp Posted July 17, 2020 Share Posted July 17, 2020 @media screen and (max-width:800px) { #collection-5defed06bcec1416d20fc6aa #pageWrapper { padding: 0px !important; } .sqs-layout > .sqs-row { margin-left: 0 !important; margin-right: 0 !important; } } Link to comment
AIX Posted July 18, 2020 Author Share Posted July 18, 2020 I think you're viewing Page Source. I only have access to abbreviated code. This is what things look like: Link to comment
rwp Posted July 18, 2020 Share Posted July 18, 2020 Did squarespace change the code? You should be able to copy and paste the code directly into design -> custom css Link to comment
rwp Posted July 18, 2020 Share Posted July 18, 2020 This is how it looks on my end, with that CSS added Link to comment
AIX Posted July 21, 2020 Author Share Posted July 21, 2020 None of it worked. But thanks for looking into it. Link to comment
rwp Posted July 21, 2020 Share Posted July 21, 2020 Are you pasting that code directly into the bottom of Design -> CSS? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.