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

Site URL: https://www.skill-up.nu/

Hi, 

We would like to have images on our mobile website that are different from the desktop version. Is that possible and does someone know how to do this? For example, our "principles" image does not suit well the mobile version, therefore we would like to add a different one. 

Thank you in advance!

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

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

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?

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

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

You can try replicate pixabay random image with your image.

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

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!

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

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?

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

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 ?

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. 

https://www.prindablesettlements.com/first-step-in-settlement-planning (Password: settlementplanning)

You mean change this to another image on mobile?

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. 

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

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!

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

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?

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?

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

And also - what size should mobile images be?

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