Stuck on tribute page

1

Hello Campers!

Since 2 days, I’m working on a tribute page, and I got stuck. Here’s what I got:

As you can see, I’ve decided to avoid frameworks like Bootstrap and build everything “from scratch”, to get more experience.

My questions:

  1. Why the bottom margin of h2 in header section overflows to the below section?
  2. The same is in #important-facts with top margin of h1 - it overflows to the above section. Although, in the .interjection everything works like a charm.
  3. Image in the header resizes itself on mobile devices, but I have no idea why.
  4. As you can see, I’ve used Font Awesome to add some icons to the links. On mobile devices, these icons overflows to text following them.

Points 3 and 4 are visible only in debug mode, not in the editor mode, so I think it must be something in the browser presets, but I have no idea what. I’ve made a screenshoot to show you what I’m talking about [LINK].

I will be extremely thankful for any suggestions.

Kind regards,
geekboy

2

In codepen:
Settings -> CSS -> CSS Base -> Reset

1 Like
3

First off, kudos to you for coding this from scratch!

Just to build off Jenovs’s post, you can always look up browser reset code to use in your css files but here’s one I’ve utilized in the past:

* { 
	/* styles to make block elements not take on extra space */ 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 

} 

html { 
	overflow-y: scroll; /* fix for the firefox scrollbar push issue */ 
	height: 100%; 

} 

body{ 
 	font-size: normal 100%; 
 	color: #000000; 
 	height: 100%; 

 } 

 /* Browser style reset so they all play nice */ 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, time, mark, audio, video { 
 	font-size: 100%; 
 	margin: 0; 
 	padding: 0; 
 	outline: 0 none; 
 	vertical-align: baseline; 
 }

This pretty much strips everything, which means you’ll have to go in and add padding and margins and font sizes yourself. That being said, if there’s an element listed above that you want to keep the default behaviors of (like paragraph tags for example) it’s simply a matter of removing it from the list.

Again there’s lots of reset code out there you can use and I would suggest finding one you like and then tweaking it for your needs project to project.

1 Like
4

Your margin is collapsing on the header element. You can read about margin-collapsing on MDN docs. Read under the sub-section “Parent and first/last child” to get an explanation of your problem.

1 Like