Re: Image banner not displaying on dawn theme mobile view

Solved

Image banner not displaying on dawn theme mobile view

innergillusions
Tourist
6 0 3

My image banners are not showing when I'm in mobile view. Everything shows fine in desktop view, but when I switch to mobile view the banners disappear unless I add text which I do not want on top of the images.

 

 @KetanKumar 

Accepted Solutions (2)
KetanKumar
Shopify Partner
37144 3648 12059

This is an accepted solution.

 

great thanks for update 

can you try code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 749px) {
.banner__media {position: relative;}
}

 

 

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

View solution in original post

KetanKumar
Shopify Partner
37144 3648 12059

This is an accepted solution.

@innergillusions 

yes, please add this code also

@media screen and (max-width: 749px){.banner__content {position:absolute; height:100%;}}
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

View solution in original post

Replies 27 (27)

KetanKumar
Shopify Partner
37144 3648 12059

@innergillusions 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
innergillusions
Tourist
6 0 3

innergillusion.com 

@KetanKumar 

KetanKumar
Shopify Partner
37144 3648 12059

@innergillusions 

thanks but its passwords protect

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
innergillusions
Tourist
6 0 3

password 

nieblo

KetanKumar
Shopify Partner
37144 3648 12059

This is an accepted solution.

 

great thanks for update 

can you try code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 749px) {
.banner__media {position: relative;}
}

 

 

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
innergillusions
Tourist
6 0 3

Thank you that worked! Now I need to make the pictures clickable with the links just like how it is in desktop version. Could you help with that also?

 

@KetanKumar 

KetanKumar
Shopify Partner
37144 3648 12059

This is an accepted solution.

@innergillusions 

yes, please add this code also

@media screen and (max-width: 749px){.banner__content {position:absolute; height:100%;}}
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
innergillusions
Tourist
6 0 3

That worked. Thank you!

KetanKumar
Shopify Partner
37144 3648 12059

@innergillusions 

its my pleasure to help us 

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
AsaConcepts
Visitor
1 0 0

good evening i have 3 MP4 files on my home page that will not play in mobile view. i have the dawn theme. it is password protected. the password is yowcru

ParisSmith
Tourist
8 0 2

I can't figure out how to work it. I'm having trouble with my banner showing up on my mobile site

KetanKumar
Shopify Partner
37144 3648 12059

@ParisSmith 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
madroze
Visitor
2 0 2

Hello, this code worked for me (made my image resize properly on mobile) however it's not made my white image appear grey on the desktop version. are you able to assist please?

KetanKumar
Shopify Partner
37144 3648 12059

@madroze 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
madroze
Visitor
2 0 2

thanks so much!

sculptandcoapparel.com

KetanKumar
Shopify Partner
37144 3648 12059

@madroze 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

.banner:after, .banner__media:after {
    opacity: 0 !important;
}

 

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
ParisSmith
Tourist
8 0 2

This code isn't working for me

Fumie
Visitor
3 0 0

Hello - I can do not have the section-image-banner.css on my theme - can you help, I am experiencing the issue that my Banner image is not showing on the site

Loúdi
Tourist
9 1 3

Hi! can you please help me too? > loudi.nl
Its not the video background im having issues with that one works fine.
If you scroll down on desktop youll see 2 images of a man and woman. These 2 are not visible/ appear white on mobile view.

KetanKumar
Shopify Partner
37144 3648 12059

@Loúdi 
oh sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

 

@media (max-width: 749px) {
#shopify-section-template--20596814348636__image_banner_ke7dDV .banner__media:first-child {
  display: block;
}
}

 

 on mobile view

KetanKumar_0-1706703876701.png

 

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
Loúdi
Tourist
9 1 3

I have another banner image if you scroll more down. Can you give me a code for that one too please? Thanks!!! you saved hours for me 😄

KetanKumar
Shopify Partner
37144 3648 12059

@Loúdi 

yes please add this code also
1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media (max-width: 749px){
#shopify-section-template--20596814348636__image_banner_UPmtDK .banner__media:first-child {
    display: block;
}
}

 

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
Loúdi
Tourist
9 1 3

Wow thanks! ur the best.

KetanKumar
Shopify Partner
37144 3648 12059

@Loúdi 

its my pleasure to help us.

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
perfecthomeusa
Visitor
2 0 1

hi can you help me please too? perfecthomeusa.com  i have same issue image banner on desktop it shows the picture and on mobile shows white only  ,,, i tried all the codes you mentioned didnt work 

KetanKumar
Shopify Partner
37144 3648 12059

@perfecthomeusa 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

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

Zworthkey
Shopify Partner
5581 642 1581

Hello,

Have you get solved your issue yet? As we go through your website it is pasword protected due to which we are not able to review your store frontend issue. So, still having any issue please provide us develeloper collaborator access for your shopify theme so that we can identified why this is happing so on your store to get it resolved for you.

Thanks