Liquid, JavaScript, themes, sales channels
Hello there!
We're having some issues with one of our section here:
We want the right side to be the exactly same as on the left side. Now left side is nice with icons and text on the left, but on the right side the icons go to the right and the text too. How can we make the right side's icons and text appear the same way (left align and not floating in the right area?).
Our site is: https://prodiswine.com/ password: 1234554321
Thank you!
Solved! Go to the solution
This is an accepted solution.
It would we better work at theme level by modifying a bit how the HTML code is generated, but a fast fix using only CSS on the current theme is the following.
Add the code at the end of timber.scss file.
#shopify-section-163169213579d26087 .row .col-lg-3:nth-child(3) .mini-title {
display: flex;
flex-direction: row-reverse;
text-align: left;
justify-content: left;
}
#shopify-section-163169213579d26087 .row .col-lg-3:nth-child(3) .mini-des {
text-align: left !important;
}
This should be the result
This is an accepted solution.
It would we better work at theme level by modifying a bit how the HTML code is generated, but a fast fix using only CSS on the current theme is the following.
Add the code at the end of timber.scss file.
#shopify-section-163169213579d26087 .row .col-lg-3:nth-child(3) .mini-title {
display: flex;
flex-direction: row-reverse;
text-align: left;
justify-content: left;
}
#shopify-section-163169213579d26087 .row .col-lg-3:nth-child(3) .mini-des {
text-align: left !important;
}
This should be the result
Dear @drakedev !
Thank you so much for your help! 🙂 The code works, one more little question:
On the right side the last item "Wine pairing perfection" doesn't align with the text just like on the left side the "Family wned and operated" one so it stratched out the image because it has 2 lines.
Is there some way to fix this and make it appear just like on the left side?
Thank you so much!
Unfortunately not in the way it is built the template, but if you add this code the result is better and both left and right has the same behavior.
.section-info-v2 .mini-content .mini-title {
display: flex;
align-items: center;
}
.section-info-v2 .mini-content .mini-title img {
height: 50px;
}
Check if you like.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024