Tech news landing page using html, css and JS
Design comparison
Solution retrospective
After making the images responsive if find out that whenever I change to mobile view, I have to reload the page for the image changes to take effect. How do I resolve this?
Community feedback
- @codarosePosted over 1 year ago
Hi, awesome solution :)
As to your question, I have a few ideas:
This is the most likely culprit I believe - I see an error in your css on line 74 - you are missing the semicolon after your width value--
.left{ width: 686px }
In the mobile design, you target the ".left img" selector, so you are applying image styling to a class that has errors earlier on in your code. Even though they are hitting at different media queries, this could still be causing some rendering issues.
The other thing that might be causing problems:
I think it is possible that your issue is coming from the way you are using the 'srcset' attribute. Your validation for your submission revealed this error:
"Bad value "images/image-web-3-desktop.jpg, images/image-web-3-mobile.jpg 575w" for attribute "srcset" on element "img": No width specified for image "images/image-web-3-desktop.jpg". (Because one or more image candidate strings specify a width (e.g., the string for image "images/image-web-3-mobile.jpg"), all image candidate strings must specify a width.)"
Hope that helps!
0
Please log in to post a comment
Log in with GitHubJoin 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