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.
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!
I had issues with the site responsivity. I had problems making the mobile view div display: none; on desktop but display on mobile. I had issues with my media queries in all and I would really hope to find someone who could put me through.
Hey Dhabiri,
I hope this answer's your question about media queries:
For your CSS code, instead of using display: block, at the top of your file use: #mobile { display: flex; justify-content: center; }
Then your card component should align properly for mobile responsiveness.
hi Community, how do you find my work, please give me opinions to improve my self
Hi Issac,
If you change this: @media screen and (max-width: 375px) to @media screen and (min-width: 375px) it'll align perfectly for mobile screensizes!
Hi guys! This was a fun challenge that took me 80min to finish, I have a couple questions and would appreciate answers:
1 - Is there a better way to change images according to devise size (Desktop or Mobile) 2 - Sometimes the webapp renders twice the first time it loads which results in two subsequent api calls that display two advices in a row. How can I avoid this additional render?
Feel free to suggest additional improvement Thank you
Hi Ismail,
I can try to help with the 2nd part. It might be a caching issue. You can try adding: {cache: "no-cache"} to the end of your fetch code.
For example, const { slip } = await (await fetch("https://api.adviceslip.com/advice", {cache: "no-cache"})).json();
After pressing the button second time, it does not show any new advice. But If I press the button a little bit later, it shows new advice.
What should I do to make it instantaneous?
Hi Tariqul,
To help with your code to show an advice quote instantaneous try adding:
{cache: "no-cache"} at the end of your fetch API call.
For example,
fetch('https://api.adviceslip.com/advice', {cache: "no-cache"})
Hope this helps!
