Jump to content

Is it possible to have different images on the mobile version of the website and desktop version?

Recommended Posts

Hi. Where is principles images?

If it is background image, you can add 2 section with 2 background images, then we will give the code to show 1 on desktop, show 1 on mobile

If it is an image block, you can add 2 image blocks, then we will give code to show 1 on desktop, show 1 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
  • 2 weeks later...
On 6/22/2021 at 8:00 PM, Skill-Up said:

Hi, it on "About us" and it is an image block 

 

Add to Design > Custom CSS

/* resize about images mobile */
@media screen and (max-width:767px) {
div#block-caaad2e9bd745ab16595 {
    width: 90%;
}
div#block-25664f826350d9cbce90 {
    width: 80%;
}
}

 

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 months later...
On 6/12/2021 at 3:17 AM, tuanphan said:

Hi. Where is principles images?

If it is background image, you can add 2 section with 2 background images, then we will give the code to show 1 on desktop, show 1 on mobile

If it is an image block, you can add 2 image blocks, then we will give code to show 1 on desktop, show 1 on mobile

I too would like to do this. Do I simply add two image blocks, on  above the other then where do I add the css code (is it under the original image block code) or is it in the design> CSS and then where specifically in there?

Link to comment
On 2/26/2022 at 2:40 AM, PawdoptionGuide said:

I too would like to do this. Do I simply add two image blocks, on  above the other then where do I add the css code (is it under the original image block code) or is it in the design> CSS and then where specifically in there?

You need to add it first, then we can give you the exactly code

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
  • 3 months later...
9 hours ago, ZABS860 said:

Hello, I'm trying to do this on https://www.aimeesternestates.com/neighborhoods (password: Newpassword) but am confused about where I put the second image. On this page there are going to be 10 images total, each linking to a different page. Ideally on mobile, I want each image to be replaced with a vertically oriented version that will be full bleed on mobile and fill the screen as it does on desktop. Does that make sense, and is that possible here? Would I just add the second vertical image I want beneath each image? How will it know to switch the right ones? Also I need to keep in mind that this whole section is coded so that the images can be full bleed on desktop.

Add this to Design > Custom CSS (for first, second images). If it works, we will send code for other images

/* Neighborhoods image mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1655096391138_29002 img {
    content: url(https://cdn.pixabay.com/photo/2022/06/22/16/10/cathedral-7278228__340.jpg);;
}
div#block-yui_3_17_2_1_1655777931071_3099 img {
    content: url(https://cdn.pixabay.com/photo/2022/03/04/00/47/wine-7046276__340.jpg);;
}
}

 

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

Try changing to this

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1655096391138_29002 img {
    content: url(https://static1.squarespace.com/static/617c086…/t/62bdd64…/1656608324289/beverly-hills-mobile.png);
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}
}

 

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
  • 3 months later...
On 10/20/2022 at 11:42 PM, asvarcs said:

hello! I have the same question, but want to add different sections (rather than image blocks) for mobile and desktop on my homepage. What would be the specific code? Thanks!

Yes. Possible. You use 7.1 or 7.0 version? Or share link to page where you added 2 sections, we can give quick instruction easier

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 10/25/2022 at 12:49 AM, K_ski said:

I would also like to do this for my site: mountainroadoutfitters.com. I would like to have two different header images for desktop and mobile. How do I do this?

Add to Design > Custom CSS

/* Mobile resize homepage top section */
@media screen and (max-width:767px) {
[data-section-id="628ea1234dbb072a756a1c4d"] {
    min-height: unset !important;
    height: 30vh;
}
}

 

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

hello I am trying to do this with my homepage. I cannot get the block images to work with code. I need two different images for my desktop and phone versions. Is there any other way around this ?

Link to comment
On 3/22/2023 at 2:51 AM, Moon838 said:

hello I am trying to do this with my homepage. I cannot get the block images to work with code. I need two different images for my desktop and phone versions. Is there any other way around this ?

What is your site url?

On 3/23/2023 at 8:16 AM, sarthebears said:
Hi, I would like to do the same thing on my website on a page called First Steps in Settlement planning. 2 images blocks where one shows up on desktop and the other shows up on mobile. 

You mean change this to another image on mobile?

image.png.4cacc283a619962921f3ffbcf1a0f095.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
  • 2 weeks later...
On 4/8/2023 at 8:36 AM, DanMart25 said:

Hello, im new to all this so mind my little knowledge, but I currently have a slide show on my homepage https://banjo-kale-nt6y.squarespace.com    (password: 11125Dmart )

The desktop version looks really good but on mobile it looks horrible. I am trying to maintain the mobile version a vertical full bleed image slideshow. 

 

Add to Design > Custom CSS

/* Mobile - Resize Slideshow */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6434af917ac5eb0ab15884a9"] ul {
    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
  • 1 month later...

I'm also trying to do this; I have an image that either looks great on phone and bad on desktop or the other way around depending on how I crop the image. Ideally I'd have the same image cropped differently depending on what device its on. I am a total newbie  - started using SS a couple of hours ago- and have insufficient knowledge to understand this thread even. What is an image 'block' ? What else can an image be? Anyway, can anyone help me with my problem? Thanks!

Link to comment
On 5/24/2023 at 7:44 PM, MaxD said:

I'm also trying to do this; I have an image that either looks great on phone and bad on desktop or the other way around depending on how I crop the image. Ideally I'd have the same image cropped differently depending on what device its on. I am a total newbie  - started using SS a couple of hours ago- and have insufficient knowledge to understand this thread even. What is an image 'block' ? What else can an image be? Anyway, can anyone help me with my problem? Thanks!

When you add a block > Choose Image in the list, that is an image block

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

Hello - I am having the same problem as some people above.

I have created a video for my homepage (in order to use full bleed, as an image carousel won't do full bleed where the image reaches right to the top of the page, including the site header).

But the video looks bad on mobile. Is there a way to rezise it to make it work, or failing that can I use an alternative still image for mobile?

Link to comment
59 minutes ago, Jodieleetaylor said:

Hello - I am having the same problem as some people above.

I have created a video for my homepage (in order to use full bleed, as an image carousel won't do full bleed where the image reaches right to the top of the page, including the site header).

But the video looks bad on mobile. Is there a way to rezise it to make it work, or failing that can I use an alternative still image for mobile?

Can you share link to homepage?

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

Hi, I have a banner slideshow on my homepage and want to add differently shaped images  for the mobile version. Please could you send me the code for that?

Site is sharedendeavours.com

 

Thanks

Link to comment
22 hours ago, NikkiBF said:

Hi, I have a banner slideshow on my homepage and want to add differently shaped images  for the mobile version. Please could you send me the code for that?

Site is sharedendeavours.com

 

Thanks

Your site is private

 

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.