Put Icons in One row in Mobile version - Dawn Theme

[thingsontheway]

Hi,

I want to place below icons on my homepage in one row for mobile version. Currently there are 4 rows and 2 columns. If everything is one row that means horizontal scroll bar will be enabled. My main purpose to make it so that these icons don't take the whole screen in one glance. 

Could you please help with it? 

Website: hamperpick.in

[BSS-TekLabs · Accepted solution]

Hi @thingsontheway,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

#shopify-section-template--18018607202550__icon_with_text_custom_gX6Rpn ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 15px;
    overflow-x: scroll;
}

#shopify-section-template--18018607202550__icon_with_text_custom_gX6Rpn ul::-webkit-scrollbar {
    /* Uncomment this line if you want to hide the scroll bar */ 
    /* display: none; */
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[thingsontheway]

Hi @BSS-TekLabs  I missed your comment.

I added your code at the end of theme.liquid file. But it didn't make any impact. Also it seems like code format is something else. There is no color font specific to the code.

[thingsontheway]

@BSS-TekLabs I remove the piece of code from theme.liquid and pasted in base.css. Code format looks fine now.

But, it didn't make any impact. Attaching screenshot. 

[thingsontheway]

@BSS-TekLabs I figured it out. Thanks for your assistance. It helped a bunch. 🙂