Solved

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

rafaelgnunes
Shopify Partner
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)
suyash1
Shopify Partner
9078 1129 1479

This is an accepted solution.

strange.... adjust padding around that section, you can try your custom code
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 13 (13)

suyash1
Shopify Partner
9078 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
11 0 3
suyash1
Shopify Partner
9078 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
11 0 3
suyash1
Shopify Partner
9078 1129 1479

@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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
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
9078 1129 1479

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

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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
11 0 3

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

suyash1
Shopify Partner
9078 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
11 0 3

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

suyash1
Shopify Partner
9078 1129 1479
yes, they were full width
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rafaelgnunes
Shopify Partner
11 0 3

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

suyash1
Shopify Partner
9078 1129 1479

This is an accepted solution.

strange.... adjust padding around that section, you can try your custom code
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI