Design comparison
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
- @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 ana
, 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 helpful0@AdrianmbuguaPosted almost 2 years ago@AdrianoEscarabote thanks need to update myself more on accessibility
1 - @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 helpful0@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@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 helpful0@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 GitHubJoin 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