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

Solved
rafaelgnunes
Tourist
11 0 3

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

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

 

Accepted Solution (1)

Accepted Solutions
suyash1
Shopify Partner
3740 410 612

This is an accepted solution.

strange.... adjust padding around that section, you can try your custom code
You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30

View solution in original post

Replies 13 (13)
suyash1
Shopify Partner
3740 410 612

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

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
suyash1
Shopify Partner
3740 410 612

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

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
suyash1
Shopify Partner
3740 410 612

@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

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
rafaelgnunes
Tourist
11 0 3

@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:

<style>
.column {
  float: left;
  width: 50.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}
</style>

<div class="row">
  <div class="column">
   <a href="https://iouiou.pt/pt-pt/collections/leggings-pants"> <img src="https://cdn.shopify.com/s/files/1/0578/6976/2725/files/SITE_iouiou_2_1296x.png?v=1635619741" alt="Snow" style="width:100%"></a>
  </div>
  <div class="column">
    <a href="https://iouiou.pt/pt-pt/collections/fitness"><img src="https://cdn.shopify.com/s/files/1/0578/6976/2725/files/SITE_iouiou_4_1296x.png" alt="Forest" style="width:100%"></a>
  </div>
 
</div>

 

suyash1
Shopify Partner
3740 410 612

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

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

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
rafaelgnunes
Tourist
11 0 3

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

suyash1
Shopify Partner
3740 410 612

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

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30