Advice generator application using HTML, CSS, JS AND APi
Design comparison
Solution retrospective
while submitting this project, I noticed that the media query is not working. I used a mobile-first design. On a large screen the width of the container should be 1440px i.e., it should take up the entire screen while the card is 600px. But, I don't know what's happening. it's very OK on my laptop whenever I open it with the live server, but it's not the same here. Please your feedback would really be helpful.
Community feedback
- @DonUggioniPosted about 2 years ago
Hi there,
Personally, I would set the background to 100% width at all times and just change the width of the card, I think it would better that way.
Other than that, seems to be working alright!
Marked as helpful0@AssumptaginikaPosted about 2 years ago@DonUggioni Alright Thank you so much.
0 - @dillon-porterPosted about 2 years ago
Hey there!
I think the issue is happening because your footer tags
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div>Is sitting outside of the main container and it's overlapping some CSS with the main content. Try placing it inside of your <main> </main> to see if that solves the problem!
Marked as helpful0@AssumptaginikaPosted about 2 years ago@dillon-porter I did that but it didn't work
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