My website header is not scaling properly on mobile devices, causing some issues.
The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two main problems occur:
- The page does not adjust to fit the phone's width, leading to a scroll bar.
- When scrolling, content that should be visible disappears due to the background color not extending and the text being white.
I am looking for a solution to make the page scale correctly on mobile devices and ensure the background color spans across the entire screen.
I have already attempted various solutions such as setting margins, padding, widths, heights to 100%, and hiding overflow-x but none seem to work. Additionally, changing the font size of the header to a responsive value did not resolve the issue either.
Here is the HTML code snippet:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="header text-center col-sm-12">
<h1>LoremIpsumLoremdolorsitamet.com</h1>
<div class="subpages text-center">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
}
html {
height: 100%;
overflow-x: hidden;
}
.header{
font-family: 'bungee shade', sans-serif;
letter-spacing: 3%;
background-color: #384047;
color: white;
padding: 2%;
text-align: center;
position: relative;
width: 100%;
}
.header .h1, .header h1 {
font-size: 200%;
}