Removing blank space on mobile version of site

2 hours ago, tuanphan said:

Can you share link to this page?

 

https://www.aelo.ai/

I'm having the same issue on my first page for the site. 
I currently have the header and footer not showing, and on desktop, it's perfectly fine. But on mobile, there's this huge white space. 

Is there anything that I can do?

Site: PerfectCaptureBooth.com

Password:2926

14 hours ago, tuanphan said:

If resize image to full size, the image will not be able to fill the height of the screen, and vice versa. We can adjust the image left or right (with the code) to make it display better.

Do you still need code?

Thank you Tuanphan.

95% of my images are vertically shot (the images are long, not wide) , could you think of a code that prevents the cropping on a mobile device but uses as little blank space as possible? 

On 7/31/2023 at 8:32 AM, Mary_DG said:

Thank you again, Tuanphan, it worked great on hellocinnamon.com site. It is perfect. 

But I tried using the same code in our other website: www.aelo.ai

slideshow:simple gallery and it is not working. see screenshot below. Should i be using a different code?

 

 

I don't see this gallery on homepage

On 8/3/2023 at 2:25 PM, PerfectCaptureBooth said:

I'm having the same issue on my first page for the site. 
I currently have the header and footer not showing, and on desktop, it's perfectly fine. But on mobile, there's this huge white space. 

Is there anything that I can do?

Site: PerfectCaptureBooth.com

Password:2926

 

I see you solved by changing page background color & align center image/text?

On 8/4/2023 at 1:53 AM, Ernest said:

Thank you Tuanphan.

 

95% of my images are vertically shot (the images are long, not wide) , could you think of a code that prevents the cropping on a mobile device but uses as little blank space as possible? 

 

 

On Mobile, to avoid image crop will need to set the fullwidth, but to not stretch the image will need to reduce the height, and in most cases that I have encountered they will always create a very large white space, about half screen height.

You can consider a solution like the comment above, they push the image to the center of the screen, and change the background color of the top and bottom. (on Mobile)

6 hours ago, tuanphan said:

On Mobile, to avoid image crop will need to set the fullwidth, but to not stretch the image will need to reduce the height, and in most cases that I have encountered they will always create a very large white space, about half screen height.

You can consider a solution like the comment above, they push the image to the center of the screen, and change the background color of the top and bottom. (on Mobile)

I have fixed it with one of your earlier codes but changing the numbers a little bit: instead of height '100vh' I changed it to height '75vh' and all is perfect now!!

Thank you!!

The code that worked:

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

On 8/6/2023 at 6:04 AM, tuanphan said:

I see you solved by changing page background color & align center image/text?

Yes I ended up doing that 

On 6/3/2022 at 8:55 AM, gwynethm said:

Happy Friday!

My CEO brought this request to me this morning. I need to remove the excessive white space from the mobile version of our website (desktop version is fine), and I'm not sure how to find the correct id for the  section in question. - I'm assuming that is the difference with all the answers that have been given before this request. - It happens on every page, so I'm guessing it's something to do with the header? I'm including a screenshot and the URL below. If you could please help, I would be so thankful!

Thanks in advance!

https://www.mainstreetruralhealth.com/

@tuanphan are you able to help with this? I am having the same issue on my mobile view. Desktop looks great but mobile has the same space as the person mention above. Any suggestions on how we may fix it? 

My site is www.lunadelmar.co  

On 11/21/2023 at 12:47 PM, NELLY said:

@tuanphan are you able to help with this? I am having the same issue on my mobile view. Desktop looks great but mobile has the same space as the person mention above. Any suggestions on how we may fix it? 

My site is www.lunadelmar.co  

I don't see space on mobile. Which page are you referring to?

Hi folks. I have a similar problem. Below is the photo of my mobile nav bar. I'm trying to get rid of the space in the middle. It's there because the first items are from the template's 'Primary Navigation' and 'Secondary Navigation'. I've tried everything above to no avail.

On 12/6/2023 at 2:53 AM, thevelvetpatch said:

Hi folks. I have a similar problem. Below is the photo of my mobile nav bar. I'm trying to get rid of the space in the middle. It's there because the first items are from the template's 'Primary Navigation' and 'Secondary Navigation'. I've tried everything above to no avail.

What is site url?

www.bedefended.ca

On 12/11/2023 at 10:51 PM, thevelvetpatch said:

www.bedefended.ca

Add to Website Tools (under Not Linked) > Custom CSS

[class*="secondary"] a.Mobile-overlay-nav-item:first-child {
    padding-top: 0px !important;
}

Hi guys, I'm another one with the blank space issue. However it's not actually just an image, it's an iframe. I've tried to solve it by setting a different height size with media query (inline css in html code), but it didn't work. On desktop looks fine, also looks fine in the Squarespace mobile edit mode (second image). But in the actual mobile (first image) you can see the blank spaces above and below the image. Any suggestions? I tried the dif codes found in this discussion, but none had worked apparently. Thanks

 

14 hours ago, cabitt said:

Hi guys, I'm another one with the blank space issue. However it's not actually just an image, it's an iframe. I've tried to solve it by setting a different height size with media query (inline css in html code), but it didn't work. On desktop looks fine, also looks fine in the Squarespace mobile edit mode (second image). But in the actual mobile (first image) you can see the blank spaces above and below the image. Any suggestions? I tried the dif codes found in this discussion, but none had worked apparently. Thanks

 

Can you share link to this item? I can't find it on homepage

https://www.bedefended.ca/

Hi Tuan.

Thanks for sending. This code semi worked. For the discord video it god rid of the space above and below the video but it also significantly reduced the size of the video which isn't ideal.

On the other pages for the site it only removed the spacing below the video and not above.

The code didn't work on the videos on the other pages of the site- videos in the narrative+episodic or the music+immersive+stills sections.

discord video - space removed above and below but the video          

. 

meta video- space removed only below the video. the other videos in the commercial section of the site are like this

narrative section- long time listener- spacing still above and below

Having the same issue with my site - huge white/ blank space below the video block before footer. Above code (from beginning of thread) unfortunately doesn't work. Any ideas, please?