Removing blank space on mobile version of site

@sqsqacer

Add the following to Design > Custom CSS.

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

  #collection-6054d3c6ad951f6d681747c1 .Main-content {
  
    padding-top : 0;
    
    }
  }

This for v7.0 using the Brine template family and specific to the poster's need.

Let us know how it goes.

@SkyP

Please post the URL for the page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 3/23/2021 at 11:25 AM, creedon said:

@sqsqacer

Add the following to Design > Custom CSS.

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

  #collection-6054d3c6ad951f6d681747c1 .Main-content {
  
    padding-top : 0;
    
    }
  }

This for v7.0 using the Brine template family and specific to the poster's need.

Let us know how it goes.

Perfect. Thank you! This was a test page. I'm going to build out a new page and will use this code with the corresponding #collection for that page.

On 3/23/2021 at 1:27 PM, creedon said:

@SkyP

Please post the URL for the page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedonThe URL for my site in progress is https://red-megalodon-ftcr.squarespace.com/ and the password is "password".

Thank you so much! 

On 4/10/2020 at 11:20 PM, tuanphan said:

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e80c87763d7965a88ad6cce"] .gallery-slideshow {
    height: 400px !important;
}
}

 

Site URL: https://www.dalaldesign.ca/

I'm having the same issue on all of the sections on my portfolio page. On desktop it's fine but from mobile there is a huge blank space and the provided codes doesn't seem to fix it.

Can you please help? Thank you in advance 

13 hours ago, Dalal said:

Site URL: https://www.dalaldesign.ca/

I'm having the same issue on all of the sections on my portfolio page. On desktop it's fine but from mobile there is a huge blank space and the provided codes doesn't seem to fix it.

Can you please help? Thank you in advance 

Can you take screenshot the space? I see fine here.

On 3/25/2021 at 7:29 PM, SkyP said:

@creedonThe URL for my site in progress is https://red-megalodon-ftcr.squarespace.com/ and the password is "password".

 

Thank you so much! 

Hi. Which space? 

I also have a similar issue: white space above and below the "slideshow:simple" in mobile view (looks fine on desktop).  I am using the same slideshow:simple  3 or 4 times per project page and I have lots of project pages. Do I have to manually find the id for every single instance of slideshow and add it in the CSS? 

a couple of sample pages would be these: https://www.alepreda.com/spaces/roundstudio
https://www.alepreda.com/spaces/upstateny

but the same issue appears in all pages in the spaces and objects sections.

Thank you in advance for your help.

Hey guys I saw this post and I have the same issue on my homepage between my central menu and other sections (only in mobile view)

https://www.thesoaresprotocol.com

Can you please help me? Thank you.

11 hours ago, A1Protocol said:

Hey guys I saw this post and I have the same issue on my homepage between my central menu and other sections (only in mobile view)

 

https://www.thesoaresprotocol.com

 

Can you please help me? Thank you.

You mean suscribe - who am i?

On 4/8/2021 at 4:51 AM, alep said:

I also have a similar issue: white space above and below the "slideshow:simple" in mobile view (looks fine on desktop).  I am using the same slideshow:simple  3 or 4 times per project page and I have lots of project pages. Do I have to manually find the id for every single instance of slideshow and add it in the CSS? 

a couple of sample pages would be these: https://www.alepreda.com/spaces/roundstudio
https://www.alepreda.com/spaces/upstateny

but the same issue appears in all pages in the spaces and objects sections.

Thank you in advance for your help.

Add to Design > Custom CSS > Then save & reload your site

/* remove slideshow mobile space */
@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 30vh !important;
}
}

49 minutes ago, tuanphan said:

You mean suscribe - who am i?

Yes and also between Press and the next section if you scroll down.

On 4/10/2021 at 10:17 AM, A1Protocol said:

Yes and also between Press and the next section if you scroll down.

And the contact section, also. Thank you.

Happy Tuesday! Up 🙂

On 4/13/2021 at 6:58 PM, A1Protocol said:

Happy Tuesday! Up 🙂

I think I answered in other post or email...Not sure. Do you still need help on this?

6 hours ago, tuanphan said:

I think I answered in other post or email...Not sure. Do you still need help on this?

Hey!

It worked out at first but now I have an issue with it:

Thank you!

Hi there!

So I finally figured out how to fit my background images into my mobile version of the site, but it keeps leaving big blank spaces between each background image as you scroll down... I did adjust the section height which helped, until I realized it then messes up my computer version of my website. The CSS I have entered so far is to make sure my background image displays the full image without zooming in and cropping it as it would've done if I didn't put the css in.

Please could you help? 

Site url: www.bywonderfullymade.net

On 5/31/2021 at 2:43 PM, wonderfullymade said:

Hi there!

So I finally figured out how to fit my background images into my mobile version of the site, but it keeps leaving big blank spaces between each background image as you scroll down... I did adjust the section height which helped, until I realized it then messes up my computer version of my website. The CSS I have entered so far is to make sure my background image displays the full image without zooming in and cropping it as it would've done if I didn't put the css in.

Please could you help? 

Site url: www.bywonderfullymade.net

Add to Design > Custom CSS > Then save & reload your site

/* Mobile-Homep-Resize Slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

I'm struggling to get rid of the side margins on my website, it has it on all my images and text and would really like them pretty much full screen and is it possible to make a certain image full screen width?

On 7/29/2021 at 2:21 AM, bea1570048477 said:

I'm struggling to get rid of the side margins on my website, it has it on all my images and text and would really like them pretty much full screen and is it possible to make a certain image full screen width?

Hi. What is site url?

Site URL: https://www.nasse.fi/palvelut/actionpaintball

I'm struggling to find a way to remove the white blank space on the mobile view of my website. I found the code below and tried that:

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

[data-section-id="5e80c87763d7965a88ad6cce"] .gallery-slideshow {

    height: 400px !important;

}

}

First, I thought that the code worked, cause when I enter into the CSS editor it gets applied but when I exit and actually view the site live, it doesn't. 

Thank you for your help!

@Danielabjo

I suggest a different target for your CSS.

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

.item-pagination-link {
    max-width: unset;
}
}

This is for v7.1 and a site-wide effect. It could be targeted more specifically to individual pages if needed.

What is odd is that this appears to be an SS bug in the portfolio page navigation. I disabled the custom CSS locally and the issue still appears.

SS is using max-width 50% on a flexbox item which seems to be causing an overflow issue.

Let us know how it goes.

@creedon

Thanks you so much for your quick answer! I tried the new code and same thing happened. It seems to work, but when I exit and actually view the site live, it doesn't.

I actually tried remove the whole "Mission paintball"-link but I didn't know how to do that. So if you can help me how to delete the link, the problem might be gone?

I hope I get better and better with Squarespace but I still have lot to learn!

@Danielabjo

Is the code installed now? If not could you put it back in so we can see/or not see what is going?

@creedon

Here you can see the code and the site. And here it seems to work but when I use my phone the white space is there still.

https://www.nasse.fi/palvelut/actionpaintball