How can I make my Icons List into a vertical row on Mobile view?

Store Design
1

Hello. I wanna make my Icons List into a vertical row instead of displaying it horizontally. On desktop it looks good horizontally, I just want the vertical way on mobile.

Captura de ecrã 2021-11-06, às 01.55.47.png
Captura de ecrã 2021-11-06, às 01.55.47.png2876×904 188 KB

I can’t give the URL of the store, because I’m still editing the theme, so it’s not the active theme.

2

@rafaelgnunes - can you share the preview link of the theme? otherwise can not check the code

3

@suyash1 Hello! This one works? https://iouiou.pt/?_ab=0&_fd=0&_sc=1

4

@rafaelgnunes - can not see icons in screenshot on that page, other icons are vertical already

5

@suyash1 Sorry, this one works: https://4pqx986blkce0xc6-57869762725.shopifypreview.com

6

@rafaelgnunes - add this css to the very end of theme.css file and check, should be like screenshot below

@media screen and (max-width:749px){
#shopify-section-template--15185811964069__icons-row .icons-row__slider{display: flex;
flex-direction: column;align-content: center;justify-content: center;}

#shopify-section-template--15185811964069__icons-row .icons-row__slider .icons-row__item{width: 100%;}
}

suyash1_0-1636169594752.png
suyash1_0-1636169594752.png1366×768 101 KB

1 Like
7

@suyash1 It’s perfect! Thank you so much!

Btw, since you’re here, can you help me on other thing? I created an html to the section you see below the slideshow, where it shows two images with promotions, but I want them to be the full width of the site. Same height, but full width with space between them as already is.

This’s the code I created:


  

   [ 
![Snow|950x430](upload://eWYl1kWFTYtc6BfGYYYf51f6JQt.png)
](https://iouiou.pt/pt-pt/collections/leggings-pants)
  

  
    [
![Forest|950x430](upload://3xEZHRq6b5G31d0i6evaCfwWOfy.png)
](https://iouiou.pt/pt-pt/collections/fitness)
8

@rafaelgnunes - try this css, adjust padding and width in above code to touch it to sides

#shopify-section-template--15185811964069__16359973884e196c65 .wrapper{padding: 0;}
9

@suyash1 It didn’t work. When I change the width and padding on my code, nothing changes.

10

@rafaelgnunes - can you add me to site? I checked it on browser and it was fine

11

@suyash1 I can’t. I’m editing the site for another person, I don’t have access to the settings. Putting the css you gave me on theme.css, the images were full width to you?

12

yes, they were full width

13

@suyash1 For me they’re exactly on the same spot, like in the middle.

14

strange… adjust padding around that section, you can try your custom code