FROM CACHE - en_header

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

Solved
Jomiguens
Tourist
7 0 1

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
Kinjaldavra
Shopify Partner
2302 569 1407

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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Replies 4 (4)
KetanKumar
Shopify Partner
34389 3443 11265

@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
Tourist
7 0 1

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

Kinjaldavra
Shopify Partner
2302 569 1407

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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Jomiguens
Tourist
7 0 1