Hello everyone I am fairly new to web design so I apologise in advance for all the questions, there is a lot I still need to learn. Please may someone take a look at my pen, whenever I view the pen in full page mode my radio buttons and checkboxes seem to move out of place including their labels. But when the web page is viewed in the editor’s view mode everything seems to be fine. My text area box also appears shorter when viewed in the full page view. Been struggling to fix this for a few days now. Fortunately I have passed all the tests in this project but I don’t want to move on till this issue is fixed. Here is a link to my pen. https://codepen.io/mimwi/pen/dydGoXQ
Looking at your code I can see a problem
<input type="radio" name="satisfaction" value="Neutral">
<label for="neutral" class="label2">Neutral</label>
You have not used the id attribute for the input elements.
Forgot about it?
You can go through the lessons that teach these:
I didn’t look too deep into the code but I just spotted this problem
1 Like
For the radio and the checkboxes, there are a lot of mistakes in the css.
Correcting these mistakes will also change the css of other input element.
- Remove the width from the input. This will change the text inputs too.
- Remove the margin-left from the
input[type="radio"] - Remove the margin-left from the
input[type="checkbox"] - Remove the margin-left from the
.label2class
You can use the id’s set for the text inputs(the name, email, and age) to set the width.
Doing this should fix the problem of the radio and checkbox
It’s not that the <textarea> is becoming smaller, it just looks smaller when the screen becomes bigger.
You can size your textarea to be responsive by using viewport width (vw).
An example is :
p{
width: 10vw;
}
1 Like
Sorry for the late reply. But thank you very much for your feedback, will follow your advice given.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.