Text columns with images on one line on mobile - Pipeline theme

Solved
Jomiguens
New Member
5 0 0

Hi,

 

I'm trying to get text columns with images to stay on one line on mobile. I've managed to get it to stay on one line on desktop but I can't do it on mobile. Is there also a way to make the images much smaller and the text larger, more similar to my old style. 

URL is www.indierefill.com

 

desktopdesktopmobilemobileold styleold style

Accepted Solution (1)

Accepted Solutions
Natztech
Shopify Partner
2237 565 1373

This is an accepted solution.

hello @Jomiguens 

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

@media only screen and (max-width: 750px){
.homepage-columns.section.bg--neutral .wrapper .grid {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.homepage-columns.section.bg--neutral .wrapper .grid .index__column {
     padding-left: 0px ;
} 
.homepage-columns.section.bg--neutral .wrapper .grid  .lazy-image.column__image {
    min-height: 70px;
    max-width: 50px;
    margin: 0px auto;
}
 .homepage-columns.section.bg--neutral .wrapper .grid .home--uppercase {
     font-size: 15px;
     padding: 8px 2px;
}
}

 

View solution in original post

Replies 4 (4)
KetanKumar
Shopify Partner
24945 2500 9043

@Jomiguens 

can you please confirm this look?

KetanKumar_0-1634367783778.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jomiguens
New Member
5 0 0

Is it possible to go any smaller at all? Or does it cause issues with the text underneath?

Natztech
Shopify Partner
2237 565 1373

This is an accepted solution.

hello @Jomiguens 

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

@media only screen and (max-width: 750px){
.homepage-columns.section.bg--neutral .wrapper .grid {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.homepage-columns.section.bg--neutral .wrapper .grid .index__column {
     padding-left: 0px ;
} 
.homepage-columns.section.bg--neutral .wrapper .grid  .lazy-image.column__image {
    min-height: 70px;
    max-width: 50px;
    margin: 0px auto;
}
 .homepage-columns.section.bg--neutral .wrapper .grid .home--uppercase {
     font-size: 15px;
     padding: 8px 2px;
}
}

 

View solution in original post

Jomiguens
New Member
5 0 0