Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FLEX

i_d_s_l 270

@ilvdrskn

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge was given to me with difficulty. Somehow I was able to repeat it, but exactly what to repeat, and not fully to make up. The CS code is terrible, it's even possible that some properties repeat each other. Nevertheless, I will be glad of any feedback

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey @ilvdrskn😄, congratulations on completing the challenge here are a few suggestions to make your site better..

1.Firstly the padding padding: 2em 5em on the button looks massive you can reduce that.. or if you are comfortable with pixels just go with pixels..

2.On the .modal-menu use the property of fixed like this, this should keep the menu on the screen even when scrolling happens..

.modal-menu {
    position: fixed;
}

3.the padding-left: 10em; on the main.main-info is pushing the box more than design..you can reduce that..

4.As for the .picture div you can use the property of background-size: contain; to display full image..

Hope that helps, Happy coding💯🔥👍🏻

Marked as helpful

1

i_d_s_l 270

@ilvdrskn

Posted

@sulemaan7070 Thanks for the advice, Minato! But I have questions about the background: if I change to contain, then on a mobile device it will float away with a decrease in the screen, but I have a fixed flex-basis, which is why between .text and .picture there is an empty space. How can this be fixed? And what can be said in general about the structure of an html document? Did I make it valid?

1
S MD suleman 3,530

@sulemaan7070

Posted

@ilvdrskn when I removed the padding:10em and made the picture object-fit:contain ..and checked on the mobile.. it seemed okay.. give it a try.. and as for the footer you are using only 60% of its width on the mobile version also.. use 100% of footer width and reduce image sizes to fit them in a line

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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