HTML CSS Flexbox Sass

Community feedback

• 

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  Hey Saleh,

  A valiant effort!

  I liked your HTML markup. It was clear and concise.

  Your CSS got me a little confused :( I couldn't really put it together very well in my brain haha. I see you added lots of @media queries. Might I advise you that putting them in one place is quite a bit easier as you can edit them easily in one place rather that running all over CSS land!

  If you'd like, take a look at what I did in this challenge regarding CSS organisation. Perhaps you can find something useful as I like to be highly organised but also very efficient. I normally use categories like typography (for things like p, h1, span and a), layout (for things like div, main, body, ul and section) and components (for things like buttons, img, svg and input). I usually start again but this time with @media queries. See the link and it will make more sense haha https://github.com/Gareth-Moore/Frontend-Mentor-projects/blob/master/Newbie/stats-preview-card-component-main/css/styles.css

  Lastly, resizing images on the fly can be done in many ways but if you want the image aspect ration to stay the same you are going to have to keep the container proportions the same. Conversely, if you want the dimensions of the container to stay change in proportion then you are going to have to stretch or distort the image in some way. You need to decide which you'd prefer but you can't have both.

  That is why when you change the card size the image got squeezed down. You need to keep the proportions of the card right so the image does have to change it's aspect ration. Setting % values and using rem's can help you a lot in this case.

  Well done! Gareth

  Marked as helpful

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @Gareth-Moore Thanks Gareth for your comment. I don't have the Sketch because of the Pro. But What I struggled with the most was the image part I don't know why it didn't work. And the Image Coloring Thing I checked your code but I didn't understand the Visibility and the Image over image thing you did with the image-container. I'd appreciate if you can explain that thing to me I am very curios to learn about.

  0

  

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  @Honko-o Hello again :)

  So don't worry about having pro. I don't either. You can use Pixel Perfect Pro (free Firefox extension) to overlay the project preview image on top of the browser. That way you can get the sizing and fonts and everything sized and positioned almost perfectly.

  Regarding the image-container. I couldn't get the colours right on the image. I tried using the background-image property with background-blend-mode property. But this didn't quite get the job done. So I added an additional layer so I could change the filtering/blending even more. I did this by making the img visible and adding filter to it so I could change it's colours and stuff. Then I changed it's opacity to 30% so the img would be invisible enough to allow the background-image to show as well. Thus I had 2 layers, one was the background-image / background-blend-mode and the other layer was the img / filter.

  I had the img included anyway because I was using it to size my image container. You can essentially use the img element to size a container, then make it invisible, then add the same image but instead of img you add it via background-image. Thus you can use background-blend-mode on the image which you cannot use on the img tag.

  Hope that helps! Gareth

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the gap of the card statistics is a bit too big and secondly the font size needs to be a bit bigger. Lastly the card title needs to have word wrap as seen in the design

  I hope this helps

  Cheers Happy coding 👍

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @TheCoderGuru Thanks For your comment bro. I struggled with image sizing thing that's why I didn't give much attention to Card size I was trying to tune the Image size to it's best.

  0
• 

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  I forgot one more Question: When ever I change the Card size the Image squeeze down and the Card got messed Is there a way to fix that ?

  0