Solved

How can I arrange icons in two rows on mobile with impulse theme?

HunterTaylor
Tourist
7 0 1

I am using impulse theme and I want to make these icons appear 2 in one row instead of stacked on top of each other on mobile. How can i do it. The section is "Text columns with images"

 

HunterTaylor_0-1713118498661.png

 

Accepted Solution (1)
Moeed
Shopify Partner
3794 958 1189

This is an accepted solution.

Hey @HunterTaylor 

 

Remove the previous code completely and add this new code with the same steps mentioned above

<style>
.grid--flush-bottom {
    display: flex !important;
}
div#shopify-section-template--22372316021023__text_columns_KpjLKt {
    background: #bed0da !important;
}
.image-wrap {
    background: #bed0da !important;
}
</style>

RESULT:

Moeed_0-1713122438327.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 14 (14)

Moeed
Shopify Partner
3794 958 1189

Hey @HunterTaylor 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
HunterTaylor
Tourist
7 0 1
Moeed
Shopify Partner
3794 958 1189

Can you tell me on which page are you facing this issue because on home page they are already side by side.

Moeed_0-1713119409750.png

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
HunterTaylor
Tourist
7 0 1

That's strange. I have dawn theme active right now but I am editing impulse theme and haven't published it yet. I sent you the preview link to the impulse theme. Let me know what do i need to give you?

Moeed
Shopify Partner
3794 958 1189

Hey @HunterTaylor 

 

A preview link will always have .shopifypreview.com in the end

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
HunterTaylor
Tourist
7 0 1

@Moeed Where can i generate the preview link. I am getting it from here. 

HunterTaylor_0-1713120307105.png

Moeed
Shopify Partner
3794 958 1189

After clicking on preview the tab which opens, in that tab in the bottom you will see "Share Preview" click on that and just send me the link of it.

 

Best Regards,

Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
HunterTaylor
Tourist
7 0 1
Moeed
Shopify Partner
3794 958 1189

Hey @HunterTaylor 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media screen and (max-width: 767px) {
.grid.grid--uniform.grid--flush-bottom {
    display: flex !important;
}
}
</style>

RESULT:

Moeed_0-1713121524637.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
HunterTaylor
Tourist
7 0 1

That's great. It worked for mobile. Any way I can make it all apear in one line for desktop too? And I want to change the section colour to BED0DA. 
I want to add a similar section on the about page as well. How do i implement the section color and making all icons appear in one line on that page as well?

 

Moeed
Shopify Partner
3794 958 1189

This is an accepted solution.

Hey @HunterTaylor 

 

Remove the previous code completely and add this new code with the same steps mentioned above

<style>
.grid--flush-bottom {
    display: flex !important;
}
div#shopify-section-template--22372316021023__text_columns_KpjLKt {
    background: #bed0da !important;
}
.image-wrap {
    background: #bed0da !important;
}
</style>

RESULT:

Moeed_0-1713122438327.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Made4uo-Ribe
Shopify Partner
5977 1439 1775

Hi @HunterTaylor 

Seems like your icons looks like this on my end. 

Made4uoRibe_0-1713119349224.png

Made4uoRibe_1-1713119366488.png

The icons adjust depends on the screen sizes. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


HunterTaylor
Tourist
7 0 1

That's strange. I have dawn theme active right now but I am editing impulse theme and haven't published it yet. Seems like this is the dawn theme that I previously had. here is  preview link to the impulse theme ( https://tailoredrings.com/?_ab=0&_fd=0&_sc=1 ) . Let me know what do i need to give you?

diego_ezfy
Shopify Partner
2967 571 898

@HunterTaylor@HunterTaylor, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > styles.css and paste this at the bottom of the file:

@media (max-width: 749px){
    [id] .logo-list[class*='count'] .logo-list__logo{
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 calc(50% - 40px) !important;
        margin: 0 20px 40px !important;
    }
}

diego_ezfy_0-1713136175107.png

 



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego