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

Advice generator application using HTML, CSS, JS AND APi

@Assumptaginika

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

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

@DonUggioni

Posted

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 helpful

0

@dillon-porter

Posted

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 helpful

0

@Assumptaginika

Posted

@dillon-porter I did that but it didn't work

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