Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Use different image on mobile than desktop


holliebolt

Question

Hello!

I'm hoping someone can help me with the code/ process for displaying a different image on the mobile site than on the desktop version. I'm not looking to resize it.  So basically, I believe I want to hide the original image when it's in mobile view and display a new image and vice versa.  Specifically, my homepage is coming out ugly / mismatched sizes due to the image blocks.  Any help on this would be greatly appreciated!

www.licensefortress.com

Link to comment

6 answers to this question

Recommended Posts

  • 0

Hey Hollie, the easiest way to do this is to upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section as needed.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Book Live Help | Squarespace Video Tutorials

Link to comment
  • 0
On 1/7/2020 at 7:40 PM, Vigasan said:

Hey Hollie, the easiest way to do this is to upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section as needed.

Hello, do you have more detailed information on how to achieve this? I've seen this solution mentioned a few times across the forum. Is there somewhere I can read more about this strategy? Thanks.

Link to comment
  • 0
On 1/22/2020 at 3:08 AM, GMDI said:

Hello, do you have more detailed information on how to achieve this? I've seen this solution mentioned a few times across the forum. Is there somewhere I can read more about this strategy? Thanks.

You need to know CSS to do this. If you create 2 images, then share link, we can take a look

Link to comment
  • 0
On 1/23/2020 at 2:44 AM, tuanphan said:

You need to know CSS to do this. If you create 2 images, then share link, we can take a look

Hi Tuan, thanks for your help. You'll recognize the site, you helped me increase the site width using CSS.

The site is igcalgary.com and I'd like to work on the first index section #services. I have attached two banner samples.

What I would like to do is have a duplicate of each index section with an alternate banner image and hide the section depending on the screen size. I found this idea in the linked forum post. @Joeyearthly suggests creating different index sections and hiding them but I haven't been able to get that to work.

 

wolf mobile banner.jpg

wolf banner desktop.jpg

Link to comment
  • 0
5 hours ago, AndiDopico said:

Hi @tuanphan

Can you help me with my website?

andinc.es Password: sweetfebrero

 

In the homepage, under the section "Como Funciona" I want the horizontal image to stay in desktop version and the squared image to show on mobile version.

 

thanks!

/* hide square image on desktop */
div#block-yui_3_17_2_1_1580242822454_16569 {
    display: none;
}
/* show squares image on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1580242822454_16569 {
    display: block;
}
}

 

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