Site margins for Squarespace 7.1 mobile

Site URL: https://www.studiofurks.com

Hello,

https://www.studiofurks.com/

I wanted to know how I could change the website margins for mobile only. As I want there to be less of the white space/margin around the website on mobile.

Thanks.

Can you upload a screenshot showing the space you're trying to remove?

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

 

22 hours ago, visionsbyfurks said:

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

 

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;
}
}

@tuanphan Thank you but it doesn't do the same for the images www.studiofurks.com

you can adjust 1vw to another value, 2vw, 3vw, 4.5vw...

@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;
}

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;
}

 

Add to Design > Custom CSS

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

How might I reduce the margin between two buttons?

On 12/31/2021 at 10:28 AM, TA2 said:

How might I reduce the margin between two buttons?

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

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.

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;
}
}

Perfect! thank you! 🤩