Change image for Mobile view - Dawn Theme

Store Design
1

Hi all,

I have inserted an image as an image gallery onto my home page. It is one single image and it is a horizontal banner (1200 x 250 px). It looks great on desktop but not so much on mobile as you could imagine. How do I put a custom image in so it changes on mobile?

Images for reference.

Thanks in advance!

pillarperformance.shop < URL

Emma.

Screen Shot 2022-03-08 at 4.10.20 pm.png
Screen Shot 2022-03-08 at 4.10.20 pm.png1074×391 57.6 KB

Screen Shot 2022-03-08 at 4.10.51 pm.png
Screen Shot 2022-03-08 at 4.10.51 pm.png1372×235 148 KB

1 Like
2

@PILLAREMMA
Make a custom section for mobile view.
you have to do it, by the custom code.

Thank you.

3

Are you please able to share how to do it with custom code?

1 Like
4

@PILLAREMMA
it takes time and for that you have to hire a developer.

5

@PILLAREMMA - watch this video to understand the steps you need to follow

6

@PILLAREMMA

There are copy/paste sections that allows you to use one image for desktop and a different one for mobile, like this one. It works as a slideshow and as a single image as well.

If you’re not willing to hire developers or spend days or weeks searching for code, it may be a good solution.

Kind regards,
Diego

7

Hi @PILLAREMMA ,

I am Anni From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern. It can be done only by some custom coding.

If you have any concerns feel free to ask me!

Regards,
Anni

8

You’ll need to edit the .css of the image banner at the bottom of the section-image-banner.css add this line of code:

@media only screen and (max-width: 600px) {

}

This is for 600px screens but you can edit the pixel aspect ratio specific to your needs and then edit the mobile only content inside of this line of css.

I hope this helps you in some way