How can I align the text and image in collection card?- Theme Dawn

[HELLO2997]

So initially the product images were too big on the collection page. So I added these code- under assets/base.css

1. .product-card-wrapper .card__inner {
2.     width: 60%;
3.     margin: auto;
4. }

Now the text is not aligned with the image. how can they be aligned together in theme Dawn?

 

please help out with-

1. resizing the collection card product images (scale it down) and

2. aligning the text with the image (text to be left aligned, not centred)

thank you so much!!!

 

[Mustafa_Ali]

hey @HELLO2997  plz share your website URL so i can help you

[Mustafa_Ali]

hey plz share your website URL so i can help you

[rajweb]

Hey  @HELLO2997 ,

In Shopify's Dawn theme, the misalignment of text and images in the collection or product grid can be fixed by ensuring that product titles and prices align consistently with the product images. Here's how you can fix it:

1. Check for Unequal Heights:

- Shopify Dawn theme uses a CSS grid or flexbox to arrange product images and text. If product titles, descriptions, or prices are of different lengths, they can cause misalignment.

2. Use CSS to Align Text with Images:

- To force consistent alignment, you can add the following CSS:

Follow these steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
  .card__information {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .card__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .card__heading {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.card__information').forEach(card => {
      card.style.minHeight = '80px';
    });
  });
</script>

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[HELLO2997]

Hi, I have updated the message. could you please help check again? sorry for the inconvenience. 

[rajweb]

@HELLO2997 ,

I see the issue! Your .product-card-wrapper .card__inner is making the images smaller, but it's not keeping the layout aligned properly. Let's fix both issues:

1. Resize Collection Page Product Images (Scale Down):

- Instead of using width: 60%, it's better to control the max width while keeping alignment:

.product-card-wrapper .card__inner {
    max-width: 250px; /* Adjust size as needed */
    margin: auto;
}

.card__media img {
    width: 100%; /* Ensures responsiveness */
    height: auto; /* Keeps aspect ratio */
    object-fit: cover; /* Ensures uniform display */
}

This ensures all product images remain proportional and well-aligned.

2.  Align Product Text to the Left

- Right now, the text is centered due to default Dawn theme styles. Let's fix it:

.card__information {
    text-align: left; /* Aligns text */
    padding-left: 10px; /* Optional: Adds space */
}

.card__heading, .price {
    text-align: left; /* Ensures all text is left-aligned */
}

This moves product titles and prices to the left under their images.

Final Steps:

- Go to Online Store > Themes > Edit Code

- Open assets/base.css

- Add the above CSS at the bottom Save & Refresh

Let me know if you need more fine-tuning!

Thanks

[HELLO2997]

Hi Rajat!

After applying your code, the text is not aligning. please see image before for reference-

kindly advice

[Mustafa_Ali]

plz share the URL of your store 

[B2Bridge]

Hi @HELLO2997 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[rajweb]

@HELLO2997 

1. Resize Collection Page Product Images (Scale Down):

.product-card-wrapper .card__inner {
    max-width: 300px !important; /* Adjust size as needed */
    margin: 0 auto !important; /* Centers the image */
}

.card__media img {
    width: 100% !important; /* Makes sure images fit inside */
    height: auto !important; /* Maintains aspect ratio */
    object-fit: cover !important; /* Ensures uniform image display */
}

This keeps all product images the same size while maintaining aspect ratio.

2. Align Product Text with the Image (Left-Aligned):

.product-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Aligns everything to the left */
}

.card__information {
    text-align: left !important; /* Ensures text starts from the left */
    width: 100% !important; /* Makes sure text spans full width */
    padding-left: 0 !important; /* Removes unnecessary padding */
}

.card__heading, .price {
    text-align: left !important;
    margin-left: 0 !important; /* Ensures text stays aligned */
}

This ensures that the text sits directly under the image and aligns properly to the left.

ADD Code:

1. Go to Shopify Admin → Themes → Edit Code

2. Open assets/base.css

3. Replace or add the above CSS at the bottom of the file Save & Refresh your collection page

This should now properly resize the images and align the text correctly without any interference from other styles!  Let me know if you need more tweaks.

[HELLO2997]

its showing like this- 

 

link-  https://www.afterstudio.in/collections/all

please advice revise code

[Mustafa_Ali]

hey @HELLO2997 plz tell me what is the main problem you facing 

[HELLO2997]

hi. so under the collection page- the images look too big.

I want to-

1. reduce the size of the images, so that there is more breathing space

2. and align the text to the revised resized image (text to be left aligned only)

[Mustafa_Ali]

hey @HELLO2997 Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
.card__content {
    display: flex;
    justify-content: center;
 }
.card__inner {
    width: 60% !important;
    left: 11rem !important;
 }
}
</style>

follow the steps 
and hope you like it 

[rajweb]

Hey @HELLO2997 ,

Please take a look at the screenshot below. Does this look great to you? What do you think? Please let me know. Thanks!