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

Sunnyside agency landing page challenge

@hassanyahya400

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


1). How do I align the background image of the header to be pixel perfect

2). The grid images at the about section is not aligning very well at medium screen sizes, how can i fix it

3). I'm unable to set the overflow of the nav-links in mobile version, if i set overflow-x to hidden the button in the nav-link will be affected

Community feedback

@cloudmate404

Posted

Hey namesake,

Your question one, I'm not sure what you are trying to ask.

But there are some things i noticed while checking your code, I may be wrong but I will list them

  1. I think you assume that the images given to you are exact dimensions which isn't the case most times. Most times you have to control your image properties with classes in css to give you the exact appearance you want. This should help your no 2 question. I played a bit with your code and applied a width of 100% to your destop-img class.
  2. I think it's best to keep your media queries at the bottom of your code, this will help you prevent overwriting properties by mistake.
  3. I noticed you added both your desktop and mobile images, i may be wrong here but i feel just the desktop image is fine and you can adjust the properties when needed.
0

@hassanyahya400

Posted

@cloudmate404 do you mean I don't have to add different background image for desktop and mobile...how do I control the image to be responsive then

And the how do I make the nave handle for the mobile design...that handle that look like triangle

0

@cloudmate404

Posted

@hsn-ng yes you don’t have to add a different image for both. You can control it to be responsive by using media queries. Your second question I’m not sure what you’re asking

0

@hassanyahya400

Posted

@cloudmate404 the section immediately after the hero section, that area that has transform your brand, stand out .....and the likes.. try and use developer tools to resize the screen to like medium size and see how the image alignment is distorted

0

@hassanyahya400

Posted

@cloudmate404 the section immediately after the hero section, that area that has transform your brand, stand out .....and the likes.. try and use developer tools to resize the screen to like medium size and see how the image alignment is distorted

0

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