Help- How to make my elements stay the same when resizing screen

Help- How to make my elements stay the same when resizing screen
0

#1

Hi Guys,
I am still very new to coding and am just trying out the personal portfolio challenge. I understand a lot of my code is probably terrible and I am yet to style my page properly with font and colour etc but I like the look of it in full screen but if I change the screen size everything moves all over the place. Is there a way to prevent this or is my code fundamentally wrong?

Thanks!
Theo


#2

Actually the “moving all over the place” is kind of the point–“responsive design” (https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ , https://en.wikipedia.org/wiki/Responsive_web_design). That’s why, as you narrow the window, your “project” tiles put fewer and fewer in a line–wider for a desktop, narrower for a phone. And your home background image resizes because you have it set to width: 100%; (and background-size: cover;, which is not saying the same thing–I’m not sure which takes precedence). You’re saying “this should be as wide as the screen,” so as you change the screen size the image resizes (or, with background-size: cover you’re saying “make this as wide or tall as needed to ensure that the whole screen is covered, even if it might crop the image”). Which is all what you want, I believe.

Meanwhile your code is actually looking pretty good. A few unsolicited pointers, though:

  1. Even though you’re not doing any javascript yet, Bootstrap does some for you, and it uses the javascript library jQuery. Your navbar won’t work unless you load jQuery into the JS section of Codepen.
  2. Keep an eye out for anywhere that Codepen is highlighting your code in red. There are few </div>s that aren’t closing any opening tag, and a few self-closing elements like <hr> that don’t need a closing tag. These are not terribly big deals, but failing to close something is!

#3

Thanks for this. Super helpful!
Theo