@dillon-porter
@Assumptaginika
Submitted
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.
@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
@Dhabiri
Submitted
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.
@dillon-porter
Posted
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.
@nabil4416
Submitted
hi Community, how do you find my work, please give me opinions to improve my self
@dillon-porter
Posted
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!
@itbeginswithi
Submitted
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
@dillon-porter
Posted
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();
@Tariqul-huda
Submitted
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?
@dillon-porter
Posted
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!
Marked as helpful
