Product preview card

Hello Tjaša,

The following ideas could help you for the mobile styles:

1- There is no need to use the position property, as the following combination affects how the image is displayed and also the layout of the '<main>' element (which will crop the top and bottom of the main container)

// So, the following lines could be removed
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);  // This causes main to be cropped
overflow: hidden;     // This doesn't allow you to scroll to see the remaining of the main
}

Note: if your intention of using the position property was to display the container along the whole screen (without the need to scroll), then you will have to minimize the heading's font sizes, and elements paddings and margins to achieve that goal.

2- You could leave a bit more space around the main element by setting the main's width with a vw (viewport width) unit:

main {
width: 90vw;   // Instead of using 100%
}

3- For the image, my personal opinion is that, it would have been a lot easier to deal with an image tag rather than using a div's background as an image. However, with your current solution, you can change the image's height to a more favorable value:

.image {
height: 17rem;  // the height has changed from previously set value of 23rem.
}

4- To make the button aligned correctly with the text, you could change the margin-left property (located at line 135 in main.css) to 30px.

Hope this helps.

If you have any questions, don't hesitate to ask.

Have a nice day :)