Shopify themes, liquid, logos, and UX
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)
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.
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 ?
Hello aquicshop,
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
I did exactly what you told me to do, but it's not working.
Here's the link to my website, https://aquic.shop/
Sorry my instructions was wrong.
And to add this feature you need hire someone as @Ninthony said
Thanks
Hi, I have the same problem and the below worked for me, tried it out
Go to online store - customize- choose header/ image with text- go down to section hight and from the drop down menu select - adapt to image.
let me know if this was helpful.
This worked GREAT! Thank you.
Hello. I am having this same issue. I have followed your instruction and it worked but what was a white image is now greyed over. Like it does if you add text. Can you help?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024