Product card preview with Flex property of CSS

@DrMESAZIM Thank you so much I will definitely join your live stream.

@Tiyana19 that's great indeed

@Petrosdevri Thank you for your suggestions I will eliminate the class as per the uses... you told me to remove the padding from .card-text, but I set it for the space around the text, is it the reason that my button is getting lots of space at its bottom? and if I remove it then what I can add for the space around the text... you said to add display: flex , but I don't understand its uses here. (if I used justify-content: space-between or space-around or space-evenly then how will I control that extra space and mostly it won't give the space outside of the text like the padding will give.)

@Tiyana19 I think yes, just use DevTools and see how text is displayed with the padding and without it. Without any padding text remains inside the .card-text class (as it's the text where this styling is applied) even though kinda cluttered (texts don't have much space between each other). To fix this try using a flexbox (display: flex;, flex-direction: column;, justify-content: space-around, align-items: start;, gap: 20px are some properties you can use and you may experiment on them). Especially gap is the most crucial one since it will define spaces between elements.

@Petrosdevri THANKS again for your guidance. I have update all these property that you mentioned, I don't know why but column gap seems not working their so I added the padding. tell me please if there is anything that I can do with column gap.

@Tiyana19 There is no exclusive property such as column-gap, flex-direction refers to how the area is going to be aligned (horizontally or vertically) while gap returns the space between some elements. But your solution seems fine so that's great, also no problem for the guidance. 👌

@visualdenniss Thank you so much I was also wondering where this space actually comes from... can you please tell me what should I do with the space that is below that button I can't seems to find the solution...

@Tiyana19 Happy to help!

I'd say in fact, you should avoid giving fixed heights altogether as it can cause various problems.

• Remove those stuff: height: calc(100% - 30%); width: calc(100% - 60%); top: 15%; left: 30%;

Try to set some max-width for the image instead. It will have a natural height. Control its height with max-width. As for the right section, you just need to adjust the paddings and margins and font-sizes accordingly to match the height. Just avoid fixed heights for it as well, the height should be determined by the content of the container. You can also give a max-width to the right section or the whole container.

Also some border-radius seems to be missing.

@visualdenniss If I set the max-width of .card-component to 100%, and then set max-width: 50% to both images and .card-text, then it won't be a problem. Right?

@Tiyana19 if you have 100% for the .card-component, it will take its parents full width, which is the entire screen in this case. Instead you can try something like max-width: 600px (in rem/em) for the .card-component. Then have images and .card-text max-width: 50% or width: 50%

and don't forget to remove these: width: calc(100% - 40%); height: calc(100% - 10%);

I've removed them and simply added max-width: 600px in dev tools and then max-width: 50% to the image and it looked pretty good to me, no need to even play with button paddings/margins.

@visualdenniss THANK YOU SO MUCH I have removed calc() . you said I should add .card-component to 600px or 37.5rem but if I add max-width: 50% instead of 100% to .card-component so it won't have that issue, right? and also I wanna ask how you decided that width should be around 600px , let's say in this project we have a card and we can find it's width by playing with dev tools. but it won't be go same with every other thing on website that we want to create, then how you decide that which width and height is perfect and there is also responsiveness their so it become crucial to find the right width and height. .

and thanks again for your help

@Tiyana19 Checked your new live version now, looking great!

I'd suggest not having width: 50% for .card-component mobile/tablet as it will cause it to shrink too much cuz 50% means half of the screen in this case and you don't need that. Just set min-width + max-width is enough in combination with width: 100% It'll make it responsive, but not go too big or too small.

Usually you have a design given, so u can measure it or simply estimate by your eye about how wide it should be (decision making of 600px) and you simply try to integrate a mobile, a tablet and a desktop version and try to set breakpoints only when necessary in-between.