Palindrome checker

I want the body to shrink a little bit more so it will work on all mobile screens but when it reaches width 349.086px it stops and exceeds the margin.

I can’t find the problem :frowning:

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 66

I’m definitely no expert on front end. But I wonder if it has something to do with your viewBox declaration plus an interaction with various other css styles with hardcoded padding and margins? I’m interested to see how you solve this! Also, very cool interface!

1 Like

Remember, the default for display: flex is to not wrap. So I would look for something that is not wrapping.

I didn’t have a width on the cards, so i set them to width 100% and now it grows and shrinks to the size of the content box

1 Like