Solved

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

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?

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄

View solution in original post

Replies 7 (7)

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
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?

Ninthony
Shopify Partner
2329 350 1023

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 it and accept it as the 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 😄
ElliotG14
Tourist
3 0 0

Thank you!

Alvarez8314
New Member
13 0 0

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

godsarmour
Visitor
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

Katie99
Visitor
1 0 0

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