How to move tile and price on top of product image/bottom left corner

Store Design
1

Hello,

I added some css to put the title and price on top of the product images but it has applied to to the top edge. I would like it to be on the bottom left corner and not right on the edge. It also is only working on desktop, please help make it work on mobile too.

Thank you!

This is how it’s looking:

Screen Shot 2024-03-14 at 8.43.47 pm.png
Screen Shot 2024-03-14 at 8.43.47 pm.png686×431 41 KB

I would like it to look like this:

Screen Shot 2024-03-14 at 8.50.37 pm.png
Screen Shot 2024-03-14 at 8.50.37 pm.png234×289 6.37 KB

https://nuijewellery.com.au/collections/new-arrivals

Code added is:

@media only screen and (min-width: 768px) {
.card__content {
position: absolute;
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}
}

2

I want it on the Bottom left of the image I mean***!!!

3

Hi @jewellerystore1 ,

To position the title and price on the bottom left corner of the product images and ensure it works on both desktop and mobile, you can adjust the CSS as follows:

@media only screen and (min-width: 768px) {
.card__content {
position: absolute;
bottom: 0;
left: 0; /* Adjust to position on the bottom left /
padding: 10px; / Add padding for spacing */
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}
}

This code will position the title and price on the bottom left corner of the product images and provide spacing from the edge. It should also work on both desktop and mobile devices.

If that’s work for you. Please like this comment.

1 Like
4

Thank you so much! How can I add some spacing from the left edge? It’s still right against it now.

5

@jewellerystore1

@media only screen and (min-width: 768px) {
.card__content {
    left: 5; // update that your own value
}
}
6

I added 5 but the position isn’t moving over?

@media only screen and (min-width: 768px) {
.card__content {
position: absolute;
bottom: 0;
left: 5; /* Adjust to position on the bottom left /
padding: 0px; / Add padding for spacing */
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}
}