Popsy-Afuluenuā¢ 20
@Popsy-Afuluenu
Submitted
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?
Esther Rose
@codarose
All comments
- Esther Roseā¢ 150
@codarose
Posted
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 - dominiquemcā¢ 90
@dominiquemc
Submitted
Any feedback would be greatly appreciated. I would mainly love insight on why the image cuts off for 240x320 size.
Esther Roseā¢ 150@codarose
Posted
Very nice solution! I like your use of the 'picture' element and your mobile-first implementation.
I am not sure I am replicating your situation where the image is cut off at dimensions of 240 x 320, but given that these dimensions are closest to the portrait orientation, my best guess would be your use of the "object-fit: cover" styling on desktop, which will crop the image to allow it to fully 'cover' its container element.
Awesome job again :)
Marked as helpful
1 - Rane Jatinā¢ 120
@Shiba-Tatsuya
Submitted
I don't get it why my solution is not showing in comaprison section
Esther Roseā¢ 150@codarose
Posted
Hi Rane!
It looks like you implemented your app with react. It is possible that the page wasn't actually 'served' yet on github pages when you submitted your solution, therefore the screenshot that was generated on Frontend Mentor would be blank. You could try "regenerating the screenshot," and see if that helps. It looks like your site is live now so it should be able to generate the screenshot.
Your app is great! I like how the card details render immediately as typing, I didn't implement it that way but I kind of wish I had now.
I noticed that your "Date" input for the expiration date is off a little bit - when the input field says "July", the card reads "06", there seems to be an off by one error for each month. It is possible this is due to the way that the date is indexed in the "Date" constructor method, i.e. January is indexed at "zero".
You might be able to fix that error by updating your state variable like so:
const [date, setDate] = useState(new Date("01/23"));
And then calling it without the Date constructor within your 'format' call: {format(date, "MM/yy")}
Nice solution!!
Marked as helpful
1 - Brijeshkumar Patelā¢ 200
@brijeshkumar001
Submitted
Hi there Iām Brijeshkumar and this is my solution for this challenge. š
Please suggest me way to create responsive heights of the elements
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. šāļø
Esther Roseā¢ 150@codarose
Posted
Great solution!
There are definitely fewer options when it comes to responsive height, however "vh" units which you used are a good option. You can also create media queries that target viewport height, and there is a media query for landscape orientation if you are designing for that use case on mobile.
0
