Shopify themes, liquid, logos, and UX
Hi, on the computer version of my site, images with text are perfectly formatted, but when switched to mobile view large chunks are cropped off. Can anybody help please?
Solved! Go to the solution
This is an accepted solution.
It's possible, but think about your overlay text. How is it going to fit on such a small picture? Or if you have text in the image itself, the text will also shrink to a very small size. It would probably have to be redesigned as I'm sure your theme is using a background image instead of letting the image element itself define the container.
Very commonly asked question. Here's a code pen showing the issue.
https://codepen.io/ninthony/pen/oNboYoJ
Computer Monitors are completely different dimensions than phones. You can see in the first box, that if your picture scaled to your phone screen width it would become quite small. What you're probably seeing is the third box. This is how themes handle background images, they have the background image set to cover the element, the element has a set height, and the image is centered. So it has to be cut off. I would redesign it to use a mobile image and desktop image and swap them out with CSS based on their screen widths. This all requires quite a bit of custom code knowledge though, so if you don't have that your best option would be to hire a developer to create this functionality for you, or make sure you're picking an image where the focus of the content is mainly in the center of the image.
Hi Ninthony, thanks for the website link. What I'm looking for is to format images like the first picture shown on your site. Is that possible?
This is an accepted solution.
It's possible, but think about your overlay text. How is it going to fit on such a small picture? Or if you have text in the image itself, the text will also shrink to a very small size. It would probably have to be redesigned as I'm sure your theme is using a background image instead of letting the image element itself define the container.
Thank you!
Hi I have the empire theme that I purchased, I'll trade for the Booster V5 theme? Thanks!
Hello this was very helpful! What about for video format? I feel like I am very close but the video gets cut off rather than an image
Hi, Did you find solution for that issue? If yes could you share it to me please?
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