That’s because you have horizontal paddings on your <input type="text"> and your <input type="submit">. Text inputs are stretched if you apply paddings, submit inputs are not. Simple fix is to set the text inputs to box-sizing:border-box.
Some other feedback: You have a lot of repeating style rules for the same elements. A refactor of the inputs in the contact section could look like this:
Set all the styles in one general input selector, and only put the ones that are differently from those in separate selectors. That way, if you want to change the padding for example, you can do that in one place, instead of copying it over and over for all inputs. It’s also much easier to maintain, if the CSS grows larger.
That would be done with a media query, which you’ve apparently already tried for the footer, but the syntax is wrong. This is not valid CSS:
Hi jsdisco, thank you so much for all the help! I’ve gone through your suggestions and now my page is in a lot better shape! It was really good you pointed out the repeating style rules, I’ve fixed them now and will go through the same steps on my other pages. Both the media query and the contact box are fixed now.
I have another question regarding my background. If you look at my page, you’ll see the background pops up between my ‘Welcome section’ and the ‘Projects section’. I’m not sure how to deal the general background. It seems that there are automatic blocks created (also at the top and bottom) that I can’t seem to get rid of.
All I have to do is get some preview images for my projects and them I’m pretty happy with the result
The grey background issue is coming from the <br> tag right after your closing </nav> tag. Generally, it’s not advisable to put <br> tags, unless you use them to cause a line break in a text block (and even then, the use of <br> is often considered bad practice).
Thanks once again jsdisco. I removed the unnecessary <br> elements and tried to fix them. In the process many things however got messed up as you might see. The grey gaps are visible between each element and somehow the buttons in the ‘projects’ section no longer respond to my CSS font-commands. I’ve also noticed that the grid is unevenly balanced and therefore the box contents are different. Any suggestions?
The grid looks uneven because you’ve set grid-template-columns to auto auto. If you want both columns to have the same width, replace that with 1fr 1fr. (fr stands for “fraction”).
I’m not sure what you mean by “the button doesn’t respond to CSS”, you’ve set it to text-align:right (which is probably not what you want?).
As for the grey gaps, this might be a great chance for you to understand the box model, and the difference between margins and paddings. You can make the gaps disappear if you add this at the very top of your CSS:
border:1px solid blue !important;
A few notes:
the * selector will select every element on the page, basically removing all margins from all elements, and giving them all a border, so you can see where they start and end
the !important flag will make sure that this rule overrides everything else. It should almost never be used in your actual CSS, but for debugging purposes, it’s ok
this will also mess up a lot of other things, but don’t care about it, it’s only a temporary CSS rule to show you where the gaps are coming from
You’ll see that the problem concerning the first gap is that your #welcome-section has a margin-bottom. It pushes the next section down, and the only thing that’s visible between the sections is the body’s grey background. If you want to make a section larger, but still keep its background-colour, use a padding-bottom instead. Alternatively, give the whole body the background-gradient. Then it doesn’t matter if you use margins or paddings for distancing elements.
You’re already quite good with CSS, there’s no obscure positioning with absolute or large margins/paddings that you often see with beginners, so I think you’ll really benefit from exploring what the box model is actually about in detail.
Hey @HaakSan, a few more suggestions about your portfolio:
The dark text with shadows is too hard to read on that dark background. I think you need to find a different approach there. Same with the dark blue text on light blue background for the project links.
Speaking of those links, when I Tab over them with my keyboard, the focus indicator is just about the same color as the background and thus I can’t see it. Same with the inputs at the bottom and the nav links at the top. I would suggest you customize the focus indicator using the CSS outline property on :focus (or something equivalent). Keyboard users should be able to easily tell where the focus is.
You should probably only have one h1 heading, so make the last three h2s.
None of the inputs at the bottom have associated labels. This is important for accessibility.
Wow, thanks once again! I’ve gone through everything and I think that it’s quite finished now. I’m happy with the structure, of course there’s always something to improve but I believe this is decent. I’m still working a bit on details and hope to build a drop-down menu for mobile phones. That’ll take some practice though. Thanks once again!
Hi bbsmooth, thank you for your suggestions! I didn’t really settle on the colours yet, just seeing what’s fun and what looks nice. I’ve gone through all your suggestions and fixed my page accordingly. Thank you very much!
It’s looking better @HaakSan. I can read all the content on the page. Semantics are very good. I can see the keyboard focus for the most part (I still think you need to make it better for the inputs and button at the bottom of the page).
You do still have issues with the <label>s you added. You didn’t give them any text, so basically they aren’t doing the job they are supposed to be doing. You need to have some actual text inside of the <label>. Unfortunately, the placeholder text you are using is NOT a replacement for label text. Also, you nested the <label>s within themselves.
You have some property names on the #welcome-section for the text align and padding reversed. You have align-text and bottom-padding it should be text-align and padding-bottom.
The value for background on the #navbar should be transparent not opaque. But you do not need to set that as the element is transparent by default.
For the transitions I would suggest you give the main selector the transition property and set the property, duration, and timing. Then on the “trigger” selector have the “state change”. If you need to transition multiple properties you can use a comma-separated list.
The transparent navbar doesn’t really work that great when you scroll down the page, it becomes hard to see when it’s overlapping other elements on the page. Usually, you would use JS to switch the background for the nav on scroll.
Hi bbsmooth, thanks again for the help. I’ve changed the labels now that they’re actually there. Just for me to understand; the labels are there so for example visibly impaired users can understand the required inputs? I was hoping to build a contact form without the usual labels, perhaps with the labels inside the input boxes. Anyways, for now it should be good. I’ll look at the keyboard focus more, I’m just trying out what works Thanks!
Hi Lasjorg, thank you very much for the comments. I was wondering why some of the CSS comments didn’t work . I’ve made the page a bit smoother here and there. Thanks for the JS suggestions, I’ve just started the JS course so once I’m more capable with that I’ll try and use it to optimise my page!
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). 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.
You can read their official documentation.