Icons and text to the left

Solved
nekosan01
New Member
18 0 0

Hello there!

We're having some issues with one of our section here:

aa9b1ddd23bc1c1c077d6893b80d9d58.png

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!

 

0 Likes
drakedev
Shopify Partner
598 128 163

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

2021-09-19 05_51_39-Prodis Wine.jpg

 

 

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
nekosan01
New Member
18 0 0

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!

0 Likes
drakedev
Shopify Partner
598 128 163

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.

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes