Design comparison
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
- @cloudmate404Posted over 2 years ago
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
- 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.
- 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.
- 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@hassanyahya400Posted over 2 years ago@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@cloudmate404Posted over 2 years ago@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@hassanyahya400Posted over 2 years ago@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@hassanyahya400Posted over 2 years ago@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
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