News Homepage

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 has grid-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 used

section{
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

Hey coder🚀🚀

Onto your question,

• to complete the main you can make two sections or two childs inside of you main one section containing , the image and other two article's and the other one containing the aside. 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, set flex-direction: column and make a div containing the two articles and give the div a flex-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🙂🙂

As mentioned above, the problem is regarding the desktop layout and the mobile navigation menu is not visible. Otherwise great job

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

@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!