Separate banner images on mobile and desktop - Dawn Theme

Solved
Novaque
Tourist
7 0 3

Hi,

I am currently using the Dawn 2.0 theme which allows you to have two images on the homepage banner.

What I am trying to do is have one image to show on mobile and the other to show on desktop.

I want the image on the right side (the vertical one) to be shown on mobile and the image on the left (the landscape one) to be shown on desktop. Both images look similar as I have made one for mobile and one for desktop.

Any help would be much appreciated.

The link to my store is fayafij.myshopify.com

Password is: freelo

 

Thanks,

Aaron

@KetanKumar 

Accepted Solutions (2)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Novaque ,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}


Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Novaque ,

Please add code:

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

it will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 11 (11)
KetanKumar
Shopify Partner
24923 2498 9041

@Novaque 

yes please try this 

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Novaque ,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}


Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Novaque
Tourist
7 0 3

Hi @LitCommerce 

Thank you for the help, I really appreciate it.

The code works great apart from when it switches to the mobile banner, the image is cut off and the dimensions of the desktop image still apply.

Is there a way so when it switches to the mobile image, the banner is the same dimensions as the image?

Hopefully this makes sense. I've attached an image to show you what I mean.

Thanks,

Aaron

Screenshot 2021-10-26 at 12.03.12 am.png

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Novaque ,

Please add code:

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

it will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Novaque
Tourist
7 0 3

Hi @LitCommerce 

That's great, all works! Thank you for your help.

Tinylighter
New Member
4 0 0

Hey man, I tried your code. It works, however when i upload image #2, image #1 becomes blurry all of a sudden. Any idea how that's possible? @LitCommerce 

 

LitCommerce
Trailblazer
288 71 72

Hi @Tinylighter,

Please send your site and if your site is password protected, please send me the password.

And you can create a new Question and send me the link. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Tinylighter
New Member
4 0 0

@LitCommerce 

 

Thetinylighter.com

shiesk

Tinylighter
New Member
4 0 0

I also followed this one since it seemed an easy fix for the problem  but to no succes. I

Show Different Shopify Banner Image on Desktop and Mobile

added the css to the base.css