Skip to content
OverviewSolutions
3
Comments
3
Ronerson de Souza Prando
@ronersonsp

All comments

  • George•30
    @geodaskSubmitted almost 2 years ago

    This is my first time of using the CSS grid layout. I would like some feedback on if I used it correctly. I would like to know some best practices.

    I am unsure for the responsiveness of the images. For the fixed dimensions the challenge asks I think they are ok. But for the intermediate sizes they are a little bit ugly because they try to fit in the small horizontal space so they become too narrow. I used object-fit: cover to prevent the weird scale, but I would like to have a better solution.

    Also I would like some feedback on the html semantic tags, if I used the appropriately.

    Responsive news homepage using CSS grid

    1
    Ronerson de Souza Prando•110
    @ronersonspPosted almost 2 years ago

    Hmm, it's not bad, I'd just try to improve the best news part, where close to 800px the images are pretty distorted.

    I really don't understand what you did with the image, but for the image, you can use the <picture> tag with a source inside indicating when the second image should go into action and which image.

    <picture> <source media="(max-width:800px)" srcset="./img/image-web-3-mobile.jpg"> <img src="./img/image-web-3-desktop.jpg" width="1460" height="600" alt=""> </picture>
    0
  • Ronerson de Souza Prando•110
    @ronersonspPosted almost 2 years ago

    Why below 1000px the site is tiny? Please don't do this, for people with smaller screens or using a tablet, you can't see anything.

    When using @media, I recommend using (max-width:value) or (min-width:value). I would also recommend organizing your code, rather than leaving everything in one folder and writing all the code in just 1 css file. You can create a CSS folder, and a JS folder, in that CSS folder you can create other folders for organization, and on top of the file, you can create a header.css, footer.css, and things like that... To link them to your main file, you just use @import './header.css';

    Marked as helpful
    1
  • Ronerson de Souza Prando•110
    @ronersonspPosted almost 2 years ago

    You didn't add the image break, when you decrease it to 600px or low, the site is very bad also because it is no longer readable, and the color on top was red, not yellow, I recommend improving on these points.

    For the image, you can use: the <picture> tag with a source inside indicating when the second image should go into action and which image.

    <picture> 
         <source media="(max-width:800px)" srcset="./img/image-web-3-mobile.jpg">

     <img src="./img/image-web-3-desktop.jpg" width="1460" height="600" alt="">

   </picture>
    Marked as helpful
    1