admin管理员组文章数量:1350348
I am making this website, and I started to get x-overflow. For reference I am only having this issue for mobile sized screens, hence why I only have the one media included. I can't seem to find out what is causing the overflow, but I think I ruled out the header. I made the header smaller that the screen width and still have overflow. CSS:
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
outline: 2px solid red;
}
html, body {
background-color: #F1EFEC;
height: 100%;
scroll-behavior: smooth;
font-family: Arial, sans-serif;
max-width: 100%;
margin: 0;
padding: 0;
}
#navbar {
max-width: 100%;
}
.main-section {
padding: 1.5%;
letter-spacing: .045rem;
}
#navbar li {
color: #030303;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: #030303;
}
pre {
white-space: pre-wrap;
max-width: 100%;
overflow-x: auto;
background-color: #D4C9BE;
padding: 10px;
border-radius: 5px;
}
code {
font-family: monospace;
color: #030303;
}
/* fit most phones */
@media (max-width: 430px) {
body {
overflow-x: hidden;
max-width: 100%;
}
#navbar {
text-align: center;
background: linear-gradient(#D4C9BE 88%, #F1EFEC);
max-width: 100%;
padding: 20px;
}
#navbar li a {
display: none;
}
#navbar header {
font-size: 3rem;
font-weight: 700;
}
.main-section {
font-size: 1.4rem;
font-weight: 500;
}
.main-section h2 {
font-size: 1.75rem;
font-weight: 600;
margin-top: 10%;
}
#footer-links {
display: flex;
justify-content: center;
flex-direction: column;
}
}
As I've said, I ruled out the header being the cause of the problem. I have also tried overflow-x: hidden; got no change. Setting everything to 100% width did nothing. I am new and at a lost. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/css/styles.css">
<script src="src/js/script.js" defer></script>
<title>Responsive Web Design Principles</title>
</head>
<body>
<nav id="navbar">
<ul>
<li><header id="page-title">Responsive Web Design</header></li>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
<li><a class="nav-link" href="#media_queries">Media Queries</a></li>
<li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
<li><a class="nav-link" href="#flexbox">Flexbox</a></li>
<li><a class="nav-link" href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<section class="main-section" id="introduction">
<h2>Introduction</h2>
<p class="info">Responsive Web Design is an approach to web design that aims to make webpages adaptive and flexible. Its aim is to keep all content in good render when changing screen sizes. It does this to ensure readability, usability, and end-user satisfaction.</p>
<h2>Why is it important?</h2>
<p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Whether they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accessibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
</section>
<section class="main-section" id="flexible_images">
<h2>Flexible Images</h2>
<p class="info">One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.</p>
<p class="indent">One technique to help images scale correctly is shown below.</p>
<pre><code>
.img {
max-width: 100%;
}
</code></pre>
</section>
<section class="main-section" id="media_queries">
<h2>Media Queries</h2>
<p class="info">Media queries are selectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.</p>
<p class="indent">Here is an example of both min and max size being used, but both are not required:</p>
<pre><code>
@media (min-width: 500px) and (max-width: 1000px) {
.class {
color: #ffffff;
width: 50%;
}
}
</code></pre>
</section>
<section class="main-section" id="viewport_meta_tag">
<h2>Viewport Meta Tag</h2>
<p class="info">The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting in tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen. </p>
<p class="indent">The Viewport Meta tag:</p>
<pre><code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code></pre>
</section>
<section class="main-section" id="mobile_first_design">
<h2>Mobile First Design</h2>
<p class="info">Mobile first design is another principle in responsive web design. As the name implies, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.</p>
</section>
<section class="main-section" id="flexbox">
<h2>Flexbox</h2>
<p class="info">Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.</p>
<p class="indent">Flex container: </p>
<pre><code>
/* this will create the flexbox */
.container {
display: flex;
}
</code></pre>
<p class="indent">Now you can either adjust the content horizontally with justify-content: or vertically with align-items:</p>
<pre><code>
/* adjust items horizontally */
.container {
display: flex;
justify-content: space-between;
}
/* adjust items vertically */
.container {
display: flex;
align-items: center;
}
</code></pre>
</section>
<section class="main-section" id="footer">
<h2>Jump back in:</h2>
<ul id="footer-links">
<li><a href="#flexible_images">Flexible Images</a></li>
<li><a href="#media_queries">Media Queries</a></li>
<li><a href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a href="#mobile_first_design">Mobile First Design</a></li>
<li><a href="#flexbox">Flexbox</a></li>
</ul>
</section>
</body>
</html>
I am making this website, and I started to get x-overflow. For reference I am only having this issue for mobile sized screens, hence why I only have the one media included. I can't seem to find out what is causing the overflow, but I think I ruled out the header. I made the header smaller that the screen width and still have overflow. CSS:
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
outline: 2px solid red;
}
html, body {
background-color: #F1EFEC;
height: 100%;
scroll-behavior: smooth;
font-family: Arial, sans-serif;
max-width: 100%;
margin: 0;
padding: 0;
}
#navbar {
max-width: 100%;
}
.main-section {
padding: 1.5%;
letter-spacing: .045rem;
}
#navbar li {
color: #030303;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: #030303;
}
pre {
white-space: pre-wrap;
max-width: 100%;
overflow-x: auto;
background-color: #D4C9BE;
padding: 10px;
border-radius: 5px;
}
code {
font-family: monospace;
color: #030303;
}
/* fit most phones */
@media (max-width: 430px) {
body {
overflow-x: hidden;
max-width: 100%;
}
#navbar {
text-align: center;
background: linear-gradient(#D4C9BE 88%, #F1EFEC);
max-width: 100%;
padding: 20px;
}
#navbar li a {
display: none;
}
#navbar header {
font-size: 3rem;
font-weight: 700;
}
.main-section {
font-size: 1.4rem;
font-weight: 500;
}
.main-section h2 {
font-size: 1.75rem;
font-weight: 600;
margin-top: 10%;
}
#footer-links {
display: flex;
justify-content: center;
flex-direction: column;
}
}
As I've said, I ruled out the header being the cause of the problem. I have also tried overflow-x: hidden; got no change. Setting everything to 100% width did nothing. I am new and at a lost. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/css/styles.css">
<script src="src/js/script.js" defer></script>
<title>Responsive Web Design Principles</title>
</head>
<body>
<nav id="navbar">
<ul>
<li><header id="page-title">Responsive Web Design</header></li>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
<li><a class="nav-link" href="#media_queries">Media Queries</a></li>
<li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
<li><a class="nav-link" href="#flexbox">Flexbox</a></li>
<li><a class="nav-link" href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<section class="main-section" id="introduction">
<h2>Introduction</h2>
<p class="info">Responsive Web Design is an approach to web design that aims to make webpages adaptive and flexible. Its aim is to keep all content in good render when changing screen sizes. It does this to ensure readability, usability, and end-user satisfaction.</p>
<h2>Why is it important?</h2>
<p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Whether they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accessibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
</section>
<section class="main-section" id="flexible_images">
<h2>Flexible Images</h2>
<p class="info">One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.</p>
<p class="indent">One technique to help images scale correctly is shown below.</p>
<pre><code>
.img {
max-width: 100%;
}
</code></pre>
</section>
<section class="main-section" id="media_queries">
<h2>Media Queries</h2>
<p class="info">Media queries are selectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.</p>
<p class="indent">Here is an example of both min and max size being used, but both are not required:</p>
<pre><code>
@media (min-width: 500px) and (max-width: 1000px) {
.class {
color: #ffffff;
width: 50%;
}
}
</code></pre>
</section>
<section class="main-section" id="viewport_meta_tag">
<h2>Viewport Meta Tag</h2>
<p class="info">The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting in tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen. </p>
<p class="indent">The Viewport Meta tag:</p>
<pre><code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code></pre>
</section>
<section class="main-section" id="mobile_first_design">
<h2>Mobile First Design</h2>
<p class="info">Mobile first design is another principle in responsive web design. As the name implies, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.</p>
</section>
<section class="main-section" id="flexbox">
<h2>Flexbox</h2>
<p class="info">Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.</p>
<p class="indent">Flex container: </p>
<pre><code>
/* this will create the flexbox */
.container {
display: flex;
}
</code></pre>
<p class="indent">Now you can either adjust the content horizontally with justify-content: or vertically with align-items:</p>
<pre><code>
/* adjust items horizontally */
.container {
display: flex;
justify-content: space-between;
}
/* adjust items vertically */
.container {
display: flex;
align-items: center;
}
</code></pre>
</section>
<section class="main-section" id="footer">
<h2>Jump back in:</h2>
<ul id="footer-links">
<li><a href="#flexible_images">Flexible Images</a></li>
<li><a href="#media_queries">Media Queries</a></li>
<li><a href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a href="#mobile_first_design">Mobile First Design</a></li>
<li><a href="#flexbox">Flexbox</a></li>
</ul>
</section>
</body>
</html>
2 Answers
Reset to default 0Your <pre> tags are causing the overflow.
Move the pre-wrap outside the media query:
pre {
white-space: pre-wrap;
}
From the MDN Docs on <pre>:
"Whitespace inside this element is displayed as written."
There's a nice trick to detecting overflows I've learn from Kevin Powell - you set an outline on all elements:
*, *::before, *::after {
outline: 3px solid green;
Now you can clearly see that some of your <pre><code> elements are overflowing, and as suggested by Kostas Minaidis, you should always apply this rule (move outside of media query):
pre {
white-space: pre-wrap;
}
Check the overflowing elements:
*,
*::before,
*::after {
outline: 3px solid green;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #F1EFEC;
}
.main-section {
padding: 1.5%;
letter-spacing: .045rem;
}
#navbar li {
color: #030303;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #030303;
}
/* fit most phones */
@media (max-width: 430px) {
body {
overflow-x: hidden;
}
#navbar {
text-align: center;
background: linear-gradient(#D4C9BE 88%, #F1EFEC);
width: 100%;
}
#navbar li a {
display: none;
}
#navbar header {
font-size: 3rem;
font-weight: 700;
}
.main-section {
font-size: 1.4rem;
font-weight: 500;
}
.main-section header {
font-size: 1.75rem;
font-weight: 600;
margin-top: 10%;
}
pre,
code {
white-space: pre-wrap;
}
#footer-links {
display: flex;
justify-content: center;
flex-direction: column;
}
}<nav id="navbar">
<ul>
<li>
<header id="page-title">Responsive Web Design</header>
</li>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
<li><a class="nav-link" href="#media_queries">Media Queries</a></li>
<li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
<li><a class="nav-link" href="#flexbox">Flexbox</a></li>
<li><a class="nav-link" href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<section class="main-section" id="introduction">
<header>Introduction</header>
<p class="info">Responsive Web Design is an approach to web design that aims to make webpages adaptive and flexible. Its aim is to keep all content in good render when changing screen sizes. It does this to ensure readability, usuability, and end-user satisfaction.</p>
<header>Why is it important?</header>
<p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Weather they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accesibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
</section>
<section class="main-section" id="flexible_images">
<header>Flexible Images</header>
<p class="info">One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.</p>
<p class="indent">One technique to help images scale correctly is shown below.</p>
<pre><code>
.img {
max-width: 100%;
}
</pre></code>
</section>
<section class="main-section" id="media_queries">
<header>Media Queries</header>
<p class="info">Media queries are slectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.</p>
<p class="indent">Here is an example of both min and max size being used, but both are not required:</p>
<pre><code>
@media (min-size: 500px) and (max-size: 1000px) {
.class {
color: #ffffff;
width: 50%;
}
}
</pre></code>
</section>
<section class="main-section" id="viewport_meta_tag">
<header>Viewport Meta Tag</header>
<p class="info">The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting is tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen. </p>
<p class="indent">The Viewport Meta tag:</p>
<pre><code>
meta name="viewport" content="width=device-width, initial-scale=1.0"
</pre></code>
</section>
<section class="main-section" id="mobile_first_design">
<header>Mobile First Design</header>
<p class="info">Mobile first design is another principle in responsive web design. As the name entails, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.</p>
</section>
<section class="main-section" id="flexbox">
<header>Flexbox</header>
<p class="info">Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.</p>
<p class="indent">Flex container: </p>
<pre><code>
/* this will create the flexbox */
.container {
display: flex;
}
</pre></code>
<p class="indent">Now you can either adjust the content horizontally with justify-content: or vertically with align-items:</p>
<pre><code>
/* adjust items horizontally */
.container {
display: flex;
justify-content: space-between;
}
/* adjust items vertically */
.container {
display: flex;
align-items: center;
}
</pre></code>
</section>
<section class="main-section" id="footer">
<header>Jump back in:</header>
<ul id="footer-links">
<li><a href="#flexible_images">Flexible Images</a></li>
<li><a href="#media_queries">Media Queries</a></li>
<li><a href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a href="#mobile_first_design">Mobile First Design</a></li>
<li><a href="#flexbox">Flexbox</a></li>
</ul>
</section>And they are not overflowing anymore:
pre {
white-space: pre-wrap;
}
*,
*::before,
*::after {
outline: 3px solid green;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #F1EFEC;
}
.main-section {
padding: 1.5%;
letter-spacing: .045rem;
}
#navbar li {
color: #030303;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #030303;
}
/* fit most phones */
@media (max-width: 430px) {
body {
overflow-x: hidden;
}
#navbar {
text-align: center;
background: linear-gradient(#D4C9BE 88%, #F1EFEC);
width: 100%;
}
#navbar li a {
display: none;
}
#navbar header {
font-size: 3rem;
font-weight: 700;
}
.main-section {
font-size: 1.4rem;
font-weight: 500;
}
.main-section header {
font-size: 1.75rem;
font-weight: 600;
margin-top: 10%;
}
#footer-links {
display: flex;
justify-content: center;
flex-direction: column;
}
}<nav id="navbar">
<ul>
<li>
<header id="page-title">Responsive Web Design</header>
</li>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
<li><a class="nav-link" href="#media_queries">Media Queries</a></li>
<li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
<li><a class="nav-link" href="#flexbox">Flexbox</a></li>
<li><a class="nav-link" href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<section class="main-section" id="introduction">
<header>Introduction</header>
<p class="info">Responsive Web Design is an approach to web design that aims to make webpages adaptive and flexible. Its aim is to keep all content in good render when changing screen sizes. It does this to ensure readability, usuability, and end-user satisfaction.</p>
<header>Why is it important?</header>
<p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Weather they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accesibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
</section>
<section class="main-section" id="flexible_images">
<header>Flexible Images</header>
<p class="info">One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.</p>
<p class="indent">One technique to help images scale correctly is shown below.</p>
<pre><code>
.img {
max-width: 100%;
}
</code></pre>
</section>
<section class="main-section" id="media_queries">
<header>Media Queries</header>
<p class="info">Media queries are slectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.</p>
<p class="indent">Here is an example of both min and max size being used, but both are not required:</p>
<pre><code>
@media (min-size: 500px) and (max-size: 1000px) {
.class {
color: #ffffff;
width: 50%;
}
}
</code></pre>
</section>
<section class="main-section" id="viewport_meta_tag">
<header>Viewport Meta Tag</header>
<p class="info">The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting is tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen. </p>
<p class="indent">The Viewport Meta tag:</p>
<pre><code>
meta name="viewport" content="width=device-width, initial-scale=1.0"
</code></pre>
</section>
<section class="main-section" id="mobile_first_design">
<header>Mobile First Design</header>
<p class="info">Mobile first design is another principle in responsive web design. As the name entails, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.</p>
</section>
<section class="main-section" id="flexbox">
<header>Flexbox</header>
<p class="info">Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.</p>
<p class="indent">Flex container: </p>
<pre><code>
/* this will create the flexbox */
.container {
display: flex;
}
</code></pre>
<p class="indent">Now you can either adjust the content horizontally with justify-content: or vertically with align-items:</p>
<pre><code>
/* adjust items horizontally */
.container {
display: flex;
justify-content: space-between;
}
/* adjust items vertically */
.container {
display: flex;
align-items: center;
}
</code></pre>
</section>
<section class="main-section" id="footer">
<header>Jump back in:</header>
<ul id="footer-links">
<li><a href="#flexible_images">Flexible Images</a></li>
<li><a href="#media_queries">Media Queries</a></li>
<li><a href="#viewport_meta_tag">Viewport Meta Tag</a></li>
<li><a href="#mobile_first_design">Mobile First Design</a></li>
<li><a href="#flexbox">Flexbox</a></li>
</ul>
</section>本文标签： htmlWhat is causing the overflowStack Overflow
版权声明：本文标题：html - What is causing the overflow? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743877672a2554625.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
<>to demonstrate. codepen.io/Paulie-D/pen/vEYvxEE – Paulie_D Commented Apr 1 at 19:19