html, css, grid, flexbox

Community feedback

• 

  Hamidar•160

  @MementoMori2323Posted over 1 year ago

  I verified your code and I think is great, however I'd lie to provide you with some feedbacks and advises!

  Adjust the media query size using the devs tool resizing the screen. You can also use clamp on font (e.g. font-size: clamp(12px, 2vw, 16px); for a more smooth resizing. You can also use the <picture> tag to manipulat how pictures behaves.

  e.g:

  • <picture>
  • <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  • <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  • <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  • </picture>

  [text]https://www.w3schools.com/tags/tag_picture.asp

  this will allow to automatically switch between images depending on the screen size without using media query for it.

  You can also use the following CSS config as default lines. It helps a lot when manipulating CSS in general by setting a default confg then customizing with your sections/divs

  • *{ -padding: 0; -margin: 0; -box-sizing: border-box; }
  • html{ scroll-behavior: smooth; }
  • img, svg, picture{ display: block; max-width: 100%; }

  This can be like the very first CSS code you use, then you continue working on everything else.

  Keep up the great work!

  2

  ---

  

  Tom Kelly•40

  @tom-kelly9Posted over 1 year ago

  Thank you. This is really useful. I'm going to play around with it. Yeah I figured there was a better way to do the images. Really appreciate the feedback@MementoMori2323

  1
• 

  Omar•240

  @omar-csdevPosted over 1 year ago

  Hi, it looks fine on desktop view. But when you resize it towards 375px, it becomes clogged up sometimes. Go in dev tools and resize the window, you will notice between 700px width and 376px width that it's not as intended.

  0

  ---

  

  Tom Kelly•40

  @tom-kelly9Posted over 1 year ago

  Thanks I'll take a look and fix that @iHesh84

  0