Blog banner image cut off on mobile version

Highlighted
New Member
1 0 0

Theme : Narrative

Hi all,

This is one of my blog page, view from my mobile. Currently the banner image is cut off when I view from my mobile. For desktop version its look totally fine.

Anyone know how to fix this issue?

Here is the link of the page:https://faisons.co/blogs/news/streetwear-is-dead

772CEE74-8D72-4B34-9ADA-A5A0FC8CFF17.png

0 Likes
Highlighted
Tourist
17 1 0

Hello,

Yeah easy, use CSS media queries to split images across screen sizes.

I usually work with some simple CSS code like that:

 

// For desktop

.grille-home .a{
margin: 0 10px 10px 0;
}

// For smartphones, the same link

@media screen and (max-width: 540px) {
.grille-home .a {
margin: 0 0 20px 0;
}
}

Have fun,

 

You can use the same technique for your image. 

.image{

width:100%;

height:100%;

}

 Have fun,

0 Likes
Highlighted
Shopify Partner
649 106 144

Hello @Faisons,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

@media screen and (max-width: 450px){
.section-header-image-wrapper {
    height: 200px;
   }
}

 

 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes