Shopify themes, liquid, logos, and UX
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.
I can't give the URL of the store, because I'm still editing the theme, so it's not the active theme.
Solved! Go to the solution
This is an accepted solution.
@rafaelgnunes- can you share the preview link of the theme? otherwise can not check the code
@rafaelgnunes- can not see icons in screenshot on that page, other icons are vertical already
@suyash1 Sorry, this one works: https://4pqx986blkce0xc6-57869762725.shopifypreview.com
@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 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>
@rafaelgnunes- try this css, adjust padding and width in above code to touch it to sides
#shopify-section-template--15185811964069__16359973884e196c65 .wrapper{padding: 0;}
@suyash1 It didn't work. When I change the width and padding on my code, nothing changes.
@rafaelgnunes- can you add me to site? I checked it on browser and it was fine
@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?
This is an accepted solution.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024