When the size of the window goes down the border seems to shrink and be non-existent and the text seems to go left? Any ideas on how I can combat this?
Feedback would also be appreciated. Thank you!
Your form looks good @mohammedgomer. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in HTML. (No need to include thebodytags). For anything you want to add to the<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.- The link to the font goes in the box labeled ‘Stuff for <head>’
- Run your HTML code through the W3C validator.
- There are HTML coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
- Change the cursor to a pointer when hovering over the submit button.
As an aside;
- Try working on sizing the form, not the whole body. And with widths, it’s easy to make them responsive if you use a percentage rather than hard-coding in pixels.
- What is the purpose of the media query? What are you trying to not display on the smaller screen?
I’ve managed to do most of what you said as seen on the Codepen, I am going to validate it with W3C once finished.
Although I am still struggling with responsiveness. What I was trying to achieve with the media query was the original size of the container and elements within it when resizing the window, as everything seems to mess up when resizing. Am I heading in the right direction?
Thank you.
Hey @mohammedgomer we can guide you better if you just show us how you are trying to do it, there is no media query in your CSS please try something out so we can tell if you are doing it right .
I asked because all that you had for a media query was display: none; and I don’t think it’s the way you want to go. Here’s a quick pen showing what that value property pair does.
Maybe as a start, remove the padding from the body selector and add a width (say 80%) to the container selector and see if that’s the direction you want to go.
1 Like
Hey @Roma Thank you so much. Managed to implement what you told me.
Although I am confused as to why the page seems to become like this when resizing to a small window? What would I use in order to retain the original size of the page or have it look somewhat presentable in that size?
Thank you.
@mohammedgomer, Have you made any changes since your last post?
When I resize my browser window everything looks like it fits nicely.
Edit: I’m on a MacBook Pro and looked at your form with Chrome, Firefox and Safari. They all look the same as this screenshot.
