My website's h1 header title seems to be unresponsive and not adjusting correctly

Question

My website's h1 header title seems to be unresponsive and not adjusting correctly

Everything was smooth sailing during the creation of a responsive website until I decided to customize my header with my preferred font-family, font-size, and letter-spacing. Once I scaled it down to less than 600px for mobile, things started looking odd.

Why is my header protruding out of the <body></body> area in an unusual manner even though my

<div class = "header"></div>

is still within the <body></body> tags? Please see the attached screenshot. Any assistance would be greatly appreciated.

Below is the HTML and CSS code for reference:

https://i.sstatic.net/lMq2j.jpg

*{
box-sizing: border-box;
}

...
... (Remaining CSS Code)
...
</footer>
</div>

</body>
</html>

html css responsive-design responsive

Answer 1

Answer №1

The font size is currently too big for the available space. In order to make it fit, you can either decrease the font size or instruct the browser to break the text at word boundaries using word-break: break-word.

Answer 2

The font size is currently too big for the available space. In order to make it fit, you can either decrease the font size or instruct the browser to break the text at word boundaries using word-break: break-word.

Answer 3

Answer №2

Check out the code snippet below. Adjust the CSS in media query for .header and .header h1 to modify padding and font size. Feel free to reach out if you need any further modifications.

*{
box-sizing: border-box;
}

body {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
background-color: #ccccff;
text-align: center;
padding: 80px;
}

.header h1 {
font-size: 68px;
font-family: "Lucida Console", Monaco, monospace;
letter-spacing: 10px;
}

/* The main content section */

.content {
padding: 10px;
background: #e6e6e6;
}

.content h2 {
text-align: center;
}

.content p {
margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* This is the footer section */
footer {
width: 100%;
height: 100%;
padding: 50px;
text-align: center;
background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
.column {
width: 100%;
}
  .header{
  padding: 10px;
  }
  .header h1{
  font-size:40px;
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Title Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- This is a header -->
<div class="header">

<h1>Website Title</h1>
<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

</div>

<!-- This is the main content -->
<div class="content">

<!-- About section -->

<h2>About</h2>
<p>
Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
</p>

<!-- 3 column responsive layout -->

<div class="row">

  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>


  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>


  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>

</div>



</div>

<!-- This is the footer -->
<div class="footer">
<footer>
Person Name &copy; 2019
</footer>
</div>

</body>
</html>

Answer 4

Check out the code snippet below. Adjust the CSS in media query for .header and .header h1 to modify padding and font size. Feel free to reach out if you need any further modifications.

*{
box-sizing: border-box;
}

body {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
background-color: #ccccff;
text-align: center;
padding: 80px;
}

.header h1 {
font-size: 68px;
font-family: "Lucida Console", Monaco, monospace;
letter-spacing: 10px;
}

/* The main content section */

.content {
padding: 10px;
background: #e6e6e6;
}

.content h2 {
text-align: center;
}

.content p {
margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* This is the footer section */
footer {
width: 100%;
height: 100%;
padding: 50px;
text-align: center;
background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
.column {
width: 100%;
}
  .header{
  padding: 10px;
  }
  .header h1{
  font-size:40px;
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Title Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- This is a header -->
<div class="header">

<h1>Website Title</h1>
<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

</div>

<!-- This is the main content -->
<div class="content">

<!-- About section -->

<h2>About</h2>
<p>
Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
</p>

<!-- 3 column responsive layout -->

<div class="row">

  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>


  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>


  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>
    Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
    </p>
    <ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
    <li>Skill 3</li>
    <li>Skill 4</li>
    <li>Skill 5</li>
    </ul>
    
  </div>

</div>



</div>

<!-- This is the footer -->
<div class="footer">
<footer>
Person Name &copy; 2019
</footer>
</div>

</body>
</html>

My website's h1 header title seems to be unresponsive and not adjusting correctly

Answer №1

Answer №2

Similar questions

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

How to Align the Button Vertically with the TextField in React Material-UI

Displaying content using Jquery's slideDown feature, overlapping existing content

Guide on positioning content around an image

Incorporating font options for a PDF generator package within the Symfony framework

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

Visibility of text compromised when placing transparent button inside input field

How can you easily make a div scroll vertically in the Android Browser?

Troubleshooting issue with applying Select2 class dynamically with JavaScript

Display the second dropdown after the user has made a selection in the first dropdown

Stop text from wrapping around the amazing fonts image

Trouble encountered when attempting to download PDF using jQuery

Overflow issue with floating labels in Bootstrap 5 within a grid container

Display or conceal columns based on their index

What is the best way to retrieve the value of a Bootstrap 4 form dropdown in PHP as soon as it is selected?

Creating an arrow line with CSS styling can be achieved easily

Elevate the value of a particular element's variable through the execution of a function

Having issues with column offsetting in Bootstrap v4.0.0-beta

Shift the sideways movement of the triangle symbol

Tips for transferring a prop from a parent component to a child in Vue.js