Skip to content
Submitted almost 2 years ago

News Home Page Main

Adrian•160
@Adrianmbugua
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Help wanted !

I am having a hard time with the main image I have used .hero img { max-width: 760px; }

But when I go on responsive mode the image dosent get any smaller creating a scroll bar at the bottom if I try 100% it messes the whole site , any suggestion is welcome. Would like tips on the hamburger menu too as you can see it doesn't really match the original Thanks

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted almost 2 years ago

    Hi Adrian, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

    to solve this problem do this:

    <a href="/" class="callout"> Read more</a>

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    Example:

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
    Adrian•160
    @AdrianmbuguaPosted almost 2 years ago

    @AdrianoEscarabote thanks need to update myself more on accessibility

    1
  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    Image width should be 100%, not an specific value in pxs.

      .hero img {
    width: 100%;
  }

    100% means it will use 100% of space of its parent container, which, in this case, is ".hero" container.

    That way it will always take up 100% of parent container, adapt and stay responsive .

    Try it, hope it helps.

    Marked as helpful
    0
    Adrian•160
    @AdrianmbuguaPosted almost 2 years ago

    @SinisaVukmirovic Thanks, I tried that , works well on desktop but as soon as you go mobile it messes the whole site , I dont know why .

    0
    Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    @Adrianmbugua

    Oh yeah, you are right... Now I see, I only tried desktop/tablet sizes responsivenes, didn't go all the way down to small phone size...

    Anyway... I believe this is the problem:

     .container{
    max-width: 1140px;
    ...
    display: grid;
    grid-template-columns: repeat(3, 1fr);
 }

    At big screens you used "grid-template-columns", 3 of them.

    But on mobile screens your used "Grid template areas":

       .container{
      display: grid;
      grid-template-areas:
      "header"
      "hero"
      "title"
      "main"
      "side_bar"
      "footer"
      "attribution";
   }

    But, "grid template areas" are not overriding "grid template columns". 3 grid columns are still beings used, even on mobile screens, from the above declared 3 grid template columns.

    So, the image stays in first column and occupies just the first column, which makes it look really small, since small mobile screen is still being divided into 3 columns.

    I am pretty sure that you can't override something with something different, or in this case, Grid columns with Grid areas.

    Refactor and try to, either, use areas in both cases, or grid template areas in both cases, just not repeat it 3 times.

    Hope this was understandable and that it will help!

    Marked as helpful
    0
    Adrian•160
    @AdrianmbuguaPosted almost 2 years ago

    @SinisaVukmirovic

    Thanks man ,this was driving me crazy , I have used "grid-template-columns:auto" for responsive

    Thanks again!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord