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

Use different image on mobile than desktop

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

Share this post


Link to post

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

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

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!

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...