How can I resize my website images for optimal mobile viewing?

Store Design
1

Having an issue with the image with text overlay at the bottom of my website https://houseboundstore.com/

The image is cut off on mobile and not showing what i want it to show. I’d like it to just show the “Up to 50% off” part by being shifted to the left.

Would be really nice if i could have some assistance from a professional who understand the code i should be editing

Thank you in advance :slightly_smiling_face:

2

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

@media only screen and (max-width: 749px){
#shopify-section-162878281065d2c363 #Hero-162878281065d2c363 {
    background-position: left top !important;
}
}
3

Thank you so much as this helps greatly, but is there anyway i can shift it to the left a little more in order to center it slightly?

4

Add this css

@media only screen and (max-width: 749px){
#shopify-section-162878281065d2c363 #Hero-162878281065d2c363 {
    height: 210px;
}
}
5

Hello @Vasehh

You can try with this code

@media screen and (max-width: 640px) {
  #shopify-section-162878281065d2c363 #Hero-162878281065d2c363 {
    background-position: -52px top!important;
  }
}
6

hello @Vasehh

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 759px){
#shopify-section-162878281065d2c363   .hero{
    object-fit: contain;
    background-size: contain;
    height: auto;
}
   }
1 Like