Change background image size on mobile

On 6/2/2020 at 8:28 PM, tuanphan said:

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

 

This works but I would like my video background to fit the mobile version of my site, is it even possible to adjust the height and width for my video background and my backup image to fit my mobile version perfectly?

https://goldfish-carrot-yaas.squarespace.com/

pass: 123456

(Im talking about the video at the top of my home page) @tuanphan

On 2/27/2021 at 12:48 PM, ArvinPaul said:

This works but I would like my video background to fit the mobile version of my site, is it even possible to adjust the height and width for my video background and my backup image to fit my mobile version perfectly?

https://goldfish-carrot-yaas.squarespace.com/

pass: 123456

(Im talking about the video at the top of my home page) @tuanphan

The video looks fine here. Did you sol.ve this?

On 6/2/2020 at 2:28 PM, tuanphan said:

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

 

Hey!

I entered this code and the footer on the bottom hid a chunk of the text that was there before. Just like as the Image got smaller the text in the footer also moved up! How do I take care of that?

www.stokedmountainadventures.com homepage on mobile

On 10/20/2021 at 4:01 AM, Traktoroff said:

Hey!

I entered this code and the footer on the bottom hid a chunk of the text that was there before. Just like as the Image got smaller the text in the footer also moved up! How do I take care of that?

www.stokedmountainadventures.com homepage on mobile

Try this new code

@media screen and (max-width:767px) {
article section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

2 minutes ago, tuanphan said:

Try this new code

@media screen and (max-width:767px) {
article section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

 

That worked super, thanks a lot!!!

So my landingpage has 2 options on desktop but on mobile I need to scroll. I want to be able to fit them in mobile on the same view if that make sense in mobile but keep it looking the same on desktop. is that possible?

https://www.nastgardsgardsrestaurang.se/ password: password

On 3/2/2022 at 7:04 PM, saga123 said:

So my landingpage has 2 options on desktop but on mobile I need to scroll. I want to be able to fit them in mobile on the same view if that make sense in mobile but keep it looking the same on desktop. is that possible?

https://www.nastgardsgardsrestaurang.se/ password: password

You mean make 2 images side by side on mobile?

@tuanphanI think this would be the best option but this is just mage in sketch not squarespace. Cant figure out how to make them smaller. 

On 3/4/2022 at 7:08 PM, saga123 said:

@tuanphanI think this would be the best option but this is just mage in sketch not squarespace. Cant figure out how to make them smaller. 

Hi,

Make them smaller & user can see both without scroll down. Is this right?

On 3/6/2022 at 12:22 PM, tuanphan said:

Hi,

Make them smaller & user can see both without scroll down. Is this right?

yes exactly. Any chance you know how to? Launching the site on fridag 😛

Have a great day!

On 3/9/2022 at 2:34 PM, saga123 said:

yes exactly. Any chance you know how to? Launching the site on fridag 😛

Have a great day!

Missing your notification. Do you still need help?

Ugh, I've had your code on my site since Aug or Sept. Now it's not working. I took out any extra code just to see what happened and its the same. Just isn't shrinking my image on the home page. It's a slider, but that didn't seem to matter before.

https://www.whslegacyline.com/

On 5/28/2022 at 7:04 AM, brandyscott said:

Ugh, I've had your code on my site since Aug or Sept. Now it's not working. I took out any extra code just to see what happened and its the same. Just isn't shrinking my image on the home page. It's a slider, but that didn't seem to matter before.

https://www.whslegacyline.com/

You mean code to resize slideshow on mobile? Which code did you use?

8 hours ago, tuanphan said:

You mean code to resize slideshow on mobile? Which code did you use?

Yes. I used this originally:

@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

On 5/29/2022 at 10:53 PM, brandyscott said:

Yes. I used this originally:

@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

11 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

 

That worked beautifully! Thanks!

@tuanphan@creedon Would one of you be able to help me with a related issue on a site I'm working on?

I'm trying to get the background image behind the testimonials on this page (the photo of the Egyptian carvings) to be shorter on mobile: https://www.thesacredspiritco.com/testimonials

Not sure how to do this with CSS. Thank you!

On 10/25/2022 at 9:38 PM, CosmicBloom81 said:

@tuanphan@creedon Would one of you be able to help me with a related issue on a site I'm working on?

I'm trying to get the background image behind the testimonials on this page (the photo of the Egyptian carvings) to be shorter on mobile: https://www.thesacredspiritco.com/testimonials

Not sure how to do this with CSS. Thank you!

You can consider reduce text size on mobile (use code, if you need, we will give the code) to make section shorter

I've been attempting to make my website more streamlined and updating images on it the last several days. I've been googling and YouTubing a lot of solutions, but currently have an issue I'm not 100% sure for the CSS coding on, but I think this is the right place?

I have changed my shop's background image using CSS, and it looks fine on desktop, but the mobile version seems to be stretching/blowing up the background image, but I'm not 100% sure what the issue is (maybe it's an older photo I had on the site that is somehow being used on the mobile side?).

Here's the link to the page:

https://www.hyperspacecoffee.com/shop

Images attached for my mobile (first) and desktop (second image) views of what I'm seeing.

On 12/11/2022 at 7:26 AM, caffeinateddiabetic said:

I've been attempting to make my website more streamlined and updating images on it the last several days. I've been googling and YouTubing a lot of solutions, but currently have an issue I'm not 100% sure for the CSS coding on, but I think this is the right place?

I have changed my shop's background image using CSS, and it looks fine on desktop, but the mobile version seems to be stretching/blowing up the background image, but I'm not 100% sure what the issue is (maybe it's an older photo I had on the site that is somehow being used on the mobile side?).

Here's the link to the page:

https://www.hyperspacecoffee.com/shop

Images attached for my mobile (first) and desktop (second image) views of what I'm seeing.

Add this under your code

@media screen and (max-width:767px) {
section[data-section-id="5f896039acd2fc474d260fea"] .section-background {
	background-size: contain;
}
}

On 12/16/2022 at 3:46 AM, tuanphan said:

Add this under your code

@media screen and (max-width:767px) {
section[data-section-id="5f896039acd2fc474d260fea"] .section-background {
	background-size: contain;
}
}

This seems to have solved it! Thank you very much!

@tuanphan Hello! I'm looking to minimize the same thing. Webiste is www.webdisabo.com PW: wendi 

Thanks! 

Hello All, 
I've got two site issues that need a little CSS code help if possible. 

Problem #1: Mobile Background Image won't take any of this code to eliminate cropping. I have a screenshot of the mobile screen for a visual and included the only CSS codes screenshot too. Help, please!!!!!!!!!

Problem #2: Tablet spacing issues. (I included a screenshot) I tried downloading Fluid Engine but my Chromebook won't allow it. When I view the tablet view in Responsive Viewer the portrait view leaves enormous space blocks on some of my images/sections. Does anyone have an easy solution for me????

On 3/21/2023 at 4:25 AM, jthree1025 said:

@tuanphan Hello! I'm looking to minimize the same thing. Webiste is www.webdisabo.com PW: wendi 

 

Thanks! 

The site url doesn't work. Can you check it again?

On 3/23/2023 at 7:30 AM, CaseStudy said:

Hello All, 
I've got two site issues that need a little CSS code help if possible. 

Problem #1: Mobile Background Image won't take any of this code to eliminate cropping. I have a screenshot of the mobile screen for a visual and included the only CSS codes screenshot too. Help, please!!!!!!!!!

Problem #2: Tablet spacing issues. (I included a screenshot) I tried downloading Fluid Engine but my Chromebook won't allow it. When I view the tablet view in Responsive Viewer the portrait view leaves enormous space blocks on some of my images/sections. Does anyone have an easy solution for me????

What is your site url?

Hi @tuanphan I'm having a similar issue; the background image of my homepage crops badly in mobile view. I've tried some of the code in this thread, but it either does nothing, or crushes the whole section into a tiny band at the top of the page. (There's text, a button, and transparent shape that's supposed to overlay the image.)

Ideally what I'd like to do is crop the width of the background image so that the girl's face is visible behind the transparent shape box. 

In other parts of the site, I've tried hiding/showing certain blocks on mobile, but I don't know if that will work for a homepage top section background image? 

(Feel like I need the disclaimer - I have very little coding knowledge, mostly just scouring forums and copy/pasting into the custom css box, so I might not have been applying the other code correctly.)

Thank you!

Site url is icanfly.squarespace.com , password is icanfly2024