Design comparison
Solution retrospective
Hey guys! Here's my version of news homepage challenge.
Community feedback
- @kabir-afkPosted about 1 year ago
Hey, great job on completing the challenge , you look gorgeous btw , you see in CSS things are prioritized as you go down in the code . . . the problem is here
section > .box { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; gap: 1.5rem; margin-bottom: 60px; width: 900px; margin-inline: auto; } section > .box { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 1.5rem; }
you have given multiple styles to your
section > .box
, and according to what I said earlier , your code that hasgrid-template-columns: repeat(2, 1fr);
will be prioritized, all I'm saying is that you could have deleted the earlier styles, that is not even the main issue , for showing things inside a single row , you could have usedsection{ display:flex; }
but that is nowhere to be seen , as far as the images are concerned , you should use
<div class = "some-class"><img src="url"></div>
img{ max-width:100% }
this way when you control the dimensions of your div your image will behave accordingly and it'll be responsive as hell . . . if you want I can fork your repo , so that I can show you what my approach to the solution would have been . . .
As far as pixel perfection is concerned , you can try visiting here . . .it will give you a step by step guide on how to achieve a design accurate screenshot
Marked as helpful1@feroztiaPosted about 1 year ago@kabir-afk Thank you so much for respond!:) I'll try to fix it
0 - @ratul0407Posted about 1 year ago
Hey coder🚀🚀
Onto your question,
-
to complete the
main
you can make two sections or twochilds
inside of youmain
one section containing , the image and other twoarticle
's and the other one containing theaside
. Then you can just make them place side by side using flexbox or grid. You can style the first section (img and articles section) using flex, setflex-direction: column
and make adiv
containing the two articles and give the div aflex-direction: row;
.And your main section is done😀😀 -
For the long image issue, You can just set a display of flex on the section that is containing the three divs with a class of
box
. And the images will go side by side. then you can do
section { //You should give a name to this section and then style it width: 900px; //You've set 900px to match the design but I would recommend using rems instead of px margin: 0 auto; // it will center the entire section
I hope it was helpful for you👍👍
Happy coding🙂🙂
Marked as helpful1 -
- @NxumaloDevPosted about 1 year ago
As mentioned above, the problem is regarding the desktop layout and the mobile navigation menu is not visible. Otherwise great job
Marked as helpful0 - @CyPhEr420Posted about 1 year ago
In your section, you can just give
.section{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
The images are big because you set your box class to 900px and 800px width with media queries and you have set the image 100% so it's taking the width of the box.Just give one main width for the box. If you use the above CSS you do not have to use media queries because it will adjust on its own.
And for the main element its does not have to be that complicated just try and rework how you structure it and try using flex maybe it will be easier
Marked as helpful0 - @feroztiaPosted about 1 year ago
@kabir-afk @ratul0407 @NxumaloDev @CyPhEr420 Hey guys! I tried to simplify it and use flexbox instead, but I stuck again on the part, where I need to make left and right classes of main to be together. And also I need help with media version. I would be reallyyyy grateful for your help <3 Honestly, frontendmentor has the best community!
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