Need Help Aligning Images With Text

Leatherboy
Tourist
5 0 1

I'm using the Supply theme and I would like to align the images with my text, which looks like it's aligned left. Would I have to change something in this line of css? 

 

.product-grid-image {
display: table;
table-layout: fixed;
width: 100%;
max-width: 100%;
min-width: 100%;
margin: 0 auto $gutter/2;

img {
display: block;
margin: 0 auto;
@include transition(opacity 0.3s ease-out);
@include backface();

}
}

 

Capture.PNG

dmwwebartisan
Shopify Partner
5877 1345 1729

@Leatherboy 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
LitExtension
Shopify Partner
700 71 124

Hi @Leatherboy,

Please place this code at the end of the "theme.scss" file.

.product-grid-item p,

.product-item--price {

  text-align: center;

}

Screenshot to refer: https://prnt.sc/11d8br3

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Leatherboy
Tourist
5 0 1

@dmwwebartisan 

Thanks for the help. Here's the URL: https://theleatherboy.com/

0 Likes
Leatherboy
Tourist
5 0 1

@LitExtension 

Hi thank you for the reply. That does help align the text to the center. We might keep it that way but what I was looking for was to left align the image to the text or expand the image ratio or size to where it aligns with the text. I've fiddled with the product-photo-container CSS and other product CSS but I cant seem to figure out how to do the stuff I want it to do.

I do appreciate the help

0 Likes
LitExtension
Shopify Partner
700 71 124

Hi @Leatherboy

Sorry for the late response, I missed your reply. 

Please place this code at the end of the "theme.scss" file.
.lazyload__image-wrapper {
max-width: 100% !important;
}
Please take a look at our screenshot here: https://prnt.sc/11nbtvk

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes