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

Removing blank space on mobile version of site


Recommended Posts

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

Link to comment
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! 

Link to comment
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 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 2 weeks later...

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.

 

Website_Capture1.JPG

Website_Capture2.JPG

Link to comment
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?

image.thumb.png.6a63494f4d839465ae885731840a45e3.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 month later...

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

Screenshot 2021-05-31 at 09.41.39.png

Link to comment
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

Screenshot 2021-05-31 at 09.41.39.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 month later...
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?

Screenshot 2021-07-28 at 20.18.49.png

Screenshot 2021-07-28 at 20.19.01.png

Hi. What is site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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!

Link to comment

@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.

1897841645_ScreenShot2021-08-02at11_46_12AM.png.5f6162a7d28c4fe68119dfc7cf5e88eb.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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!

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...