Jump to content

Change background image size on mobile

Go to solution Solved by tuanphan,

Recommended Posts

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 7 months later...
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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

iPhone 8.png

Hi,

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 months later...
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

image.thumb.png.b8ebf6d6ee44374f66e8c039d6fa26e0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.

Mobile site.jpg

Squarespot PC desktop.jpg

image.png

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

Mobile site.jpg

Squarespot PC desktop.jpg

image.png

Add this under your code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.