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!
Hello,
Yes possible
Can you please share store URL?
here you go: miflora.shop
I Will try this out thank you!
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;
}
}
This works like magic! is it possible to make it fit horizontally instead of vertical ?
Yes, But in mobile screen you need to decrease font size according to the screen.
Otherwise it will look like this
If you will not decrease the font size according to the screen then it will look like this
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;
}
}
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%;
Works great! Thank you again. 
You welcome!