How can I align the second featured product photo to the right?

Store Design
1

My site is https://untamedtallow.com/

I am trying to get only the SECOND featured product on the home page to have the text on the left and the picture aligned to the right (demonstrated below)

untamedtallow_0-1663646180982.png
untamedtallow_0-1663646180982.png400×271 96.9 KB

I entered this code in base.css, but it just aligned both images to the right:

.featured-product.product.grid.grid–1-col.gradient.color-background-1.isolate.grid–2-col-tablet {

display: flex !important;

flex-direction: row-reverse !important;

}

Any ideas? @KetanKumar @Ahsan_ANC

2

please use this code

.section-template--15723592024249__16540464818fed13e1-padding .grid {
    flex-direction: row-reverse !important;
}
1 Like
3

Hi @untamedtallow .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file base.css

.featured-product{
flex-direction: row-reverse !important;
}

Hope this helps.

Best Regards;

Pagefly

1 Like
4

Please add below css code in bottom of assets/base.css file

#shopify-section-template–15723592024249__16540464818fed13e1 .grid__item.product__media-wrapper {
order: 2;

}

#shopify-section-template–15723592024249__16540464818fed13e1 .product__info-wrapper.grid__item {
order: 1;

}
Thank you.

1 Like
5

Hi @untamedtallow ,

Does it not have option to set image on left, right?

6

Hello @untamedtallow ,

For an overall solution, you need to add a theme setting(checkbox) in the featured product section, so that you can easily switch the image position from right or left.

Once you add a setting then you need to render this code if the checkbox (for aligning the image right) is enabled then this code should include, otherwise it should not include.

.featured-product{

flex-direction: row-reverse !important;

}

Hope this works for you, let us know if you need any other help.

Regards,

CedCommerce

1 Like
7

This worked! I pasted it in bsae.css under /base/

8

It does not, but Ahsan_ANC had the answer!