How do I make my product cards look like steelites when hovered over

[lukafernada]

My store is cheffings.net .

I want to make my product cards to directly border each other, with a line seperator between a full bleed picture and description - for example (not the same size as, but same formatting framework as this):

MENS

And I the description to fade quickly (0.2-0.5 sec) to slightly darker shade upon hover, reacting like the product cards do on Steelites website, for example:

https://www.steelite.com/tableware/porcelain/rene-ozorio/essence.html

I wish to keep my product cards the same size and font. Just have to it changed like the details above.

You may use the home page of my website or a product page such as this to test on:

Chef Plates

Thanks !

[devcoders]

Hi @lukafernada

You want like this.

[lukafernada]

yes! Just like that but could you make sure the lines bordering the title/descripttoin are the same stroke length as the picture borders. Also make sure that there is a border on the far left. Thanks

[mastroke]

try using this Css

.listing-page .product .cards {
gap: 15px;
max-width: 95%;
margin: 20px auto;
}

let me know if still you are facing any issue

[lukafernada]

Could you tell me where i should input this? Thanks

[mastroke]

hi @lukafernada
please use in css file

[lukafernada]

@mastroke

.listing-page .product .cards {
gap: 15px;
max-width: 95%;
margin: 20px auto;
}

It’s not done anything - I believe the .listing-page .product .cards part is incorrect?

[mastroke]

hii @lukafernada please use this
.product .cards {
gap: 15px !important;
max-width: 95% !important;
margin: 20px auto !important;
}

[lukafernada]

@mastroke

.product .cards {
gap: 15px !important;
max-width: 95% !important;
margin: 20px auto !important;
}

Do i put it in base.css or custom css?

[mastroke]

@lukafernada

Do i put it in base.css or custom css?

@lukafernada you can put this in custom.css

[PaulNewton]

@lukafernada Put custom CSS in a custom CSS setting for that section or at the theme level.
https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css

Do it that way even to test it BEFORE going to edit files and risking breaking your theme or at minimum disabling future automatic theme upgrading.

If you mess it up,
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-back

[lukafernada]

It is not doing anything? Are you able to test it out yourself on your end?

[lukafernada]

Hi Devcoders, could you please inform me on how you achieved this layout.

Along with that that would you be able to make sure the lines bordering the title/description are the same stroke length as the picture borders. Also make sure that there is a border on the far left. Thanks

[devcoders]

Hi @lukafernada

Okay, could you please send me the collaborator code? I’ll implement this on your store.

[lukafernada]

Would it be possible you send me the steps/code here? - I want to learn how to do it myself. Let me know if that is too complex though

Thanks!

[devcoders]

Hi @lukafernada

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

#product-grid {
  gap: 0 !important;
}

#product-grid .grid__item {
  padding: 0 !important;
  margin: 0 !important;
}
.card {
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.card__inner > .card__content {
  display: none !important;
}
.card__media img {
  width: 100%;
  display: block;
}
.card > .card__content {
  border-top: 1px solid #e5e5e5;
  padding: 12px;
  background: #fff;
  transition: background 0.3s ease;
}
.card:hover > .card__content {
  background: rgba(0, 0, 0, 0.05);
}
#product-grid .grid__item {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}



@media (min-width: 990px) {
  #product-grid.grid--4-col-desktop .grid__item:nth-child(4n) {
    border-right: none;
  }
}
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
}

[lukafernada]

This is excellent thank you. Just to neaten it up would you be able to

• make it so the border lines are all the same thickness, as the pictures cards lines up against each other make it look twice as thick

• put border lines on the far left and right of the text box

• increase the left padding of the text so it isn’t right up against the border

• make it so the product squares go up against the full width of the screen

• make it so this works on mobile

If you would be able to tweak it so it fits these I would be very grateful thank you

[PaulNewton]

Ask for ONE thing, don’t give a wishlist, respect contributors time or just hire them to do the work because what your asking for is work not a courtesy. yeeeeeesh.

[lukafernada]

**devcoders apologies if I am overstepping, I did not mean to. Let me know how much of that is possible that you could, the first four points are only small tweaks, of course disregard the mobile format - that is too much.

Apologies**

thank you.

[devcoders]

Hi @lukafernada

Please create a list of all the points and either send it here or email it to me. I will review all the points together at once.

Best regards,
Devcoder