Jump to content

Site margins for Squarespace 7.1 mobile

Recommended Posts

  • 2 weeks later...
22 hours ago, visionsbyfurks said:

@tazmeah Sure it's the space around the edges that I wanted to reduce.

 

IMG_1634.jpg

IMG_1635.jpg

Add to Design > Custom CSS

/* site margin - mobile */
@media screen and (max-width:767px) {
/* header */
.header-announcement-bar-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !important;
}
/* page */
#page .content-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !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

@tuanphan

I've added the following code to adjust the portfolio image paddings however I'm trying to adjust the padding now inbetween the gallery items (I've attached a screenshot below the code):
 

/* Padding on mobile portfolio grid */

@media screen and ( max-width: 767px ) {

  .tweak-portfolio-grid-overlay-width-full .portfolio-grid-overlay {
  
    padding-left: 2px !important;
    padding-right: 2px !important;
}

 

Screenshot 2021-01-16 at 15.23.17.png

Edited by visionsbyfurks
Link to comment
On 1/16/2021 at 10:25 PM, visionsbyfurks said:

@tuanphan

I've added the following code to adjust the portfolio image paddings however I'm trying to adjust the padding now inbetween the gallery items (I've attached a screenshot below the code):
 


/* Padding on mobile portfolio grid */

@media screen and ( max-width: 767px ) {

  .tweak-portfolio-grid-overlay-width-full .portfolio-grid-overlay {
  
    padding-left: 2px !important;
    padding-right: 2px !important;
}

 

Screenshot 2021-01-16 at 15.23.17.png

Add to Design > Custom CSS

/* Mobile portfolio padding */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-row-gap: 100px;
}
}

 

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
  • 11 months later...
On 12/31/2021 at 10:28 AM, TA2 said:

1510190294_ScreenShot2021-12-30at7_30_20PM.png.666cdd9a15186f7c9cd33c81c21f3967.pngHow might I reduce the margin between two buttons?

Hi. Can you share link to page where you added 2 buttons?

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
  • 1 year later...
On 1/10/2021 at 1:17 PM, tuanphan said:

Add to Design > Custom CSS

/* site margin - mobile */
@media screen and (max-width:767px) {
/* header */
.header-announcement-bar-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !important;
}
/* page */
#page .content-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !important;
}
}

 

Hello, this code worked really well on the website I'm working on. It just didn't work in the footer of the website, what should I change? Thank you.

Link to comment
On 9/12/2023 at 11:45 PM, LogikEvidence said:

Hello, this code worked really well on the website I'm working on. It just didn't work in the footer of the website, what should I change? Thank you.

#page .content-wrapper target Page Content only, if you want to target page content + footer, use this new code

/* site margin - mobile */
@media screen and (max-width:767px) {
/* header */
.header-announcement-bar-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !important;
}
/* page */
#page .content-wrapper, footer.sections .content-wrapper {
    padding-left: 1px !important;
    padding-right: 1px !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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.