I really struggled with using two different images for the responsive aspect of this page. It's still not acceptable, but after trying a few different ways, I can't get it to look exactly like the example. What is the easiest way to set up different images to use for different size screens? Thank you for any advice!!
Hi there, congratulations on completing the challenge!
For dealing with an image that changes depending on screen size you can use the <picture> element. You can read more about it Here
For example:
<picture>
<source media="(min-width:768px)" srcset="/images/desktop.jpg"/>
<img src="/images/mobile.jpg" alt="">
</picture>
Any suggestions will be much appreciated
Hi Hassan! Nice job completing the challenge
I have some suggestions that may be helpful.
I noticed you made an incrementing variable for the advice number. The Advice Slip API slip object has an id value which you can use instead of having to increment a variable each fetch call.
Also if you want to have an advice slip displayed before having to press the button you can look into having the fetch call happen during an onload event. More information here 📘
Hope I could help! Happy coding!
Hi there! Nice job on completing the challenge!
I have some suggestions that may help.
<picture> element can help deal with an image that changes depending on screen size such as the divider in this challenge. You can read more about it hereFor example:
<picture>
<source media="(min-width: 48em)" srcset="/images/desktop.jpg"></source>
<img src="/images/mobile.jpg"alt=""></img>
</picture>
The only other thing I would mention is the font sizes in your card.
Hope I could help, and happy coding!
Getting the SVG icon to be perfectly aligned with the text in the button is always a challenge for me. I'm not sure if my padding is correct overall, but I think it looks okay. The paragraph font color looks a little off to me, but I used what was given in the style guide so I'm not sure. I used bootstrap for the mobile view then some flexbox styling for the desktop view. I'd like to add more media queries for landscape view on a phone, but overall, this was a very fun challenge.
Hi Christina!
applying flexbox to the button and centering the flex items with justify-content: center and align-items: center usually works for me when centering SVG icons with button text.
Nice solution! happy coding!
Your feedback is much appreciated. Thank you in advance.
Nice job! A few things you could take a look at:
<picture> element for images that change depending on screen size
Taking another look at your media query to change your page layout on smaller devices
