@Steffan153 Thank you for the hint to solve my issue. I am working on it and definitely try your code.
Quick codepen tip: To clean up your code, in any editor (HTML, CSS, or JS) you can click ‘Tidy XXX’ (XXX is HTML, CSS or JS).
Almost good, but to complete all the changes, complete this, and then also this:
And, maybe make the select box have the same background as the other inputs. If you need a hint, feel free to ask me.
@brandon_wallace Hi, Thank you so much for your suggestions and feedback. It helps me a lot. I have just try to do all the correction as you mentioned.
Can you please check it? https://codepen.io/shwetapatel3591/pen/arabpZ
A comparison between with the viewport meta and without:
And of course, you can still scroll down.
On dropdown, to get same width you can set it to 315px. To get background white,
@Steffan153 Thanks again for your guideline. I insert the viewport meta tag. It really makes the difference.
If you ever need to see what something looks like on mobile, I can send you a screenshot or screen record.
@Steffan153 Thanks. I appreciate it and I will surely ask you if I need it.
Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):
@Steffan153 It’s a nice way to check the application or web page. I like it and I will try to use it.
@Steffan153 I want to change the background color of radio buttons and checkbox using the following code:
.radio, input [type=“checkbox”]
But it’s not working. Do you have another suggetions for it?
You can’t customize radio / checkbox buttons easily. It requires fairly complex code, try googling and you’ll see the complicated code. Also, it will probably require having two elements for just one checkbox. The first one will be the real checkbox that will be hidden, and the second one will have something to do with making a custom checkbox.
@Steffan153 Sure, I will check it and try to implement it. Thanks for the guideline.
Actually, since you have labels for the checkboxes, it shouldn’t require many adjustments to the HTML. You could try hacking on this pen:
I just noticed a typo in the html, it is opening the label tag and then the closing tag is missing a /.
@Steffan153 I tried to check the typo in html code in the checkbox section. But I didn’t get it. Can you please mention the line number or value of that checkbox?
On line 32 in HTML, it should be
</label> instead of
@Steffan153 Thank you. I just closed the tag. I was looking into checkbox so I didn’t get it.