Store info container Custom CSS - make everything fit on mobile version

[miflora]

Hi! I am trying to find out if there is a way to make the store info content fit in the container on mobile version and get rid of the scroll bar. can it be done with CSS? 

Thanks!

[Ifzan]

Hello,

Yes possible

Can you please share store URL?

[miflora]

here you go: miflora.shop

[Ifzan · Accepted solution]

You can use this css
@media (max-width: 767px){

.home-store-info .store-slider {

    flex-wrap: wrap;

}

.home-store-info .store-slider .store-item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 80%;

    flex: 0 0 100%;

    max-width: 100%;

    border: 0;

    border-bottom: 1px solid #e3e3e3;

}

.home-store-info .store-slider .store-item:last-child {

    border-bottom: 0px;

}

}

[miflora]

This works like magic! is it possible to make it fit horizontally instead of vertical ?

[Ifzan]

Yes, But in mobile screen you need to decrease font size according to the screen.

Otherwise it will look like this

[Ifzan]

If you will not decrease the font size according to the screen then it will look like this

[Ifzan]

[miflora]

Was able to fix it by just adjusting max-width on the css code that you provided above. Thanks again! 

@media (max-width: 767px) {
.home-store-info .store-slider {
flex-wrap: wrap;
}
.home-store-info .store-slider .store-item {
-webkit-box-flex: 0;
-ms-flex: 0 0 80%;
flex: 0 0 100%;
max-width: 33%;
border: 0;
border-bottom: 1px solid #e3e3e3;
}
.home-store-info .store-slider .store-item:last-child {
border-bottom: 0px;
}
}

[Ifzan]

You need to change this in there 3 width size same otherwise it will not support some browser

-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;

[miflora]

Works great! Thank you again. 😁

[Ifzan]

You welcome!

[miflora]

I Will try this out thank you!