Mobile header to large for the screen

HTML-CSS
#1

Hello

The header on my mobile website is not sizing properly.
i.e…when I load my website, it is too big for the screen.

Tried using box-sizing and max-width=100% to the header, nothing works. any suggestions?

1 Like
#2

can you post a link to the code?

#3

I have not done it on freeCodeCamp, giving a link will be difficult. I’ll try my best to explain:

HTML head is

CSS for mobile

html {
box-sizing:border-box;
}
header {
position: fixed;
max-width:100%;
top:0;
left:0;
right:0;
}

#4

Post your code in a link with HTML & CSS if you need any website i’ll give you just make an account in codepen . io and send us the link to see what’s happening here :grinning: p.s sorry for my english !

#5

You could use media query and set costum size of header based on screen resolution, I think you also need to use meta tag for responsive design.

#6

So that would create a header section that is fixed on top of the screen. Not sure I understand what the problem is. What do you mean it is too big for the screen. Could you post a screenshot?

#7

I managed to debug my own code and figured out how to center my mobile page.

step 1: html file was not linking correctly to the CSS files.

``<link rel=“stylesheet” type=“text/css” media=“only screen and (min-width:993px)” href=…\stylesheet.css"/>

``link rel=“stylesheet” type=“text/css” media=“only screen and (max-width:992px)” href="…\stylesheet-mobile.css"/>

step r: In CSS file for mobile site

``body {

`` width:100%;

``margin:auto;
}

It is important to include two media breakpoints when using alternate CSS files for display. also note the px values differ by 1 px.

Thank you everyone for brainstorming!

#8

I also suggest learning flexbox:

It will make HTML projects so much easier and is built into HTML/CSS.

1 Like
#9

Thanks @michaelnicol, that’s exactly what I used for this project. This tutorial is really helpful

#10