make my banner visible on mobile

New Member
3 0 0

Hello,

I tried the solutions available on the shopify community but nothing works for me or I didn't find the right topic.

I just want to make my banner visible on mobile because it looks good on pc but on mobile, the image is cut out, do you have a answer ?

(I use the venture theme)

0 Likes
Astronaut
1094 150 274

Very common question with a not so easy answer. The thing about desktop vs mobile is that desktop viewport is wider than it is tall, and mobile viewport is taller than it is wide. Obviously the same picture is not going to work on both displays. The way most themes circumvent this is to use the background-image property in CSS and use the background-size property to cover, and the background-position property to center. This works but as you can see, your image is cut off because with a background-image, you have to define the height and width of your container for the image to show up at all. The way I typically handle this situation is to use a picture element and swap out 2 images, one for desktop and one for mobile and let the images define the size of the container rather than explicitly defining them yourself. This will require a lot of reworking your code, so if you aren't familiar with editing I'd suggest hiring a shopify expert to achieve the kind of effect you're looking for. 

If my solution helped you, please like and accept as solution! ??
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
440 84 96

Hello 

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

div#shopify-section-slideshow {
    display: none;
}

@media (max-width: 768px){  
div#shopify-section-slideshow {
    display: block;
}
}

If still not working as you want then share your store url.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
New Member
3 0 0

Yes, two images one for mobile and one for pc would be a good idea if there is not too much code to add.
Do you know how to do that ?

0 Likes
New Member
3 0 0

I did exactly what you told me to do, but it's not working.

Here's the link to my website, https://aquic.shop/

0 Likes
Shopify Partner
440 84 96

Sorry my instructions was wrong.

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes