I'm having problems with images being cut off in mobile view. (Booster Theme)

Solved
ElliotG14
Tourist
3 0 0

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?

0 Likes
Ninthony
Shopify Partner
1798 260 708

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. 

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
ElliotG14
Tourist
3 0 0

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?

0 Likes
Ninthony
Shopify Partner
1798 260 708

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.

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
ElliotG14
Tourist
3 0 0

Thank you!

0 Likes
Alvarez8314
New Member
13 0 0

Hi I have the empire theme that I purchased, I'll trade for the Booster V5 theme? Thanks!

0 Likes
godsarmour
New Member
1 0 0

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

0 Likes
Katie99
New Member
1 0 0

Hi, Did you find solution for that issue? If yes could you share it to me please? 

 

0 Likes