How can I align right side icons and text to the left as on the left side?

[nekosan01]

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!

[drakedev · 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

[nekosan01]

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!

[drakedev]

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.