My Product Preview Card made with Bootstrap v5.0

Hello Marta, welcome to the frontend mentor community!

Answering your question about the sizes, the sizes 1440px and 375 are just a reference to know in which dimensions the design were created. You can follow this but not stick these numbers since your solution will be open in multiple screens. A value you should follow is the container size, for example, this container has around max-width: 900px.

To do this challenge I choose GRID, here's my approach to build this component with 2 columns

All you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

Hope it helps and I want to see your next challenges.

Hi Marta, congrats on completing this project, to answer your question concerning the widths, the specified width in the documentation isn’t for the size of the container, those are the widths of the devices that the screenshots were taken at.

Hello my dear.

First of all, congratulations for your effort in finishing your first project here with us :)

Next, when he says 1440px Desktop and 375px Mobile, it's the size of the screen itself and not the card. The card will have to adapt to all dimensions between 1440px and 375px.

So your card should follow the following logic:

375px < your card < 1440px.

Adaptations will be given responsively, using @media.

Second, it's ok for you to use Bootstrap, being that it was the only way you could but the ideal was to try with CSS Flex or CSS Grid.

A tip, for you to center everything in the center, you can use the following:

body{ display: flex; flex-direction: row; justify-content: center; align-items: center; min height: 100vh; }

This will make your card stop in the middle, the rest you will adjust according to what is necessary. If you want, I'll leave my repository of this exercise for you to see how it looks.

Hope this helps.

If possible, mark as helpful :-)

It helps me a lot.

Github: https://github.com/themegazord/Product-Preview-Card-Component Live Site: https://incandescent-phoenix-6d0d26.netlify.app

Hey Marta, Looks very nice!

I am new to frontend development, so unfortunately I can't provide any feedback for improvement. Even though, I can say that it looks really good and well done! :)

The only thing I saw is that there is a small overlapping between the 2 elements (the image and the text) when switching to a mobile screen size, and I think that the bottom-left corner of the image still has a border-radius there which is not needed in this screen size :)

Great job, Raz