How to fix header image cut-off issue on mobile view?

How to fix header image cut-off issue on mobile view?

dmccall10
Tourist
8 0 2

Hello,

 

I am using the refresh theme 9.0, my header image is to the right on desktop view next to my container text. on mobile I noticed that my image is cut off and doesn't show the full image.

 

Is there any way to fix this in code and keep the desktop version on the right and mobile to show the full image.

 

I attached images of the desktop and what it shows on mobile.

Replies 2 (2)

made4Uo
Shopify Partner
3873 718 1214

Hi @dmccall10 

 

Maybe adjust your image width a little, but this is the css solution for you

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 750px) {
div#Slider-template--15521248608388__slideshow .slideshow__media.banner__media > img {
     object-fit: cover;
    object-position: 100%;
}
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
vdwaltj
Tourist
19 0 1

Hi...I copied the text but it is still a bit cut off. Also, my computer view is also cut off