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

Question

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.

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

REPLACE THIS:

#pageWrapper {
    padding: 20px !important;
}

WITH THIS:

.sqs-layout > .sqs-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0
@media screen and (max-width:800px) {
  #collection-5defed06bcec1416d20fc6aa #pageWrapper {
      padding: 0px !important;
  }

  .sqs-layout > .sqs-row {
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

I think you're viewing Page Source.  I only have access to abbreviated code.  This is what things look like:

Screen Shot 2020-07-18 at 2.20.43 PM.png

Share this post


Link to post
  • 0

Did squarespace change the code?

You should be able to copy and paste the code directly into design -> custom css


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

This is how it looks on my end, with that CSS added

image.thumb.png.03f4adfe2e15886cd52461fa44532014.png

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Are you pasting that code directly into the bottom of Design -> CSS?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...