My Footer on mobile gets cut off the page
Question
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Work Sans";
}
/* navigation styles start here */
.header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
@media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
.header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.left {
margin: 2rem;
font-family: 'Sora', sans-serif;
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
}
.footer {
width: 100vw;
display: block;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
background-color: #18181a;
}
.innerFooter {
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.innerFooter .logoContainer {
width: 35%;
float: left;
height: 100%;
display: block;
}
.innerFooter .footerThird {
padding-left: 20px;
width: calc(21.66666667 - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.innerFooter .footerThird:last-child {
margin-right: 0;
}
.innerFooter .footerThird h1{
font-family: 'Work Sans';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.innerFooter span {
font-family: 'Work Sans';
font-size: 12px;
color: white;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<body>
<div class="header">
<amp-img
src="https://i.imgur.com/vPr7fdQ.png"
width="175px"
height="50px"
></amp-img>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</div>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><span style="font-size: 46px;">Products</span></p>
<amp-carousel
layout="responsive"
type="slides"
height="720"
width="1280"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="https://i.imgur.com/VjNbHoD.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/CFw62Qo.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/DSFCYpd.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/i2gLNZD.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/wxkmAop.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/x1s8gJs.png"
width="1280"
height="720"
></amp-img>
</amp-carousel>
<p style="text-align: center;"><span style="font-size: 46px;">Manufacturers</span></p>
<p style="text-align: center;"><br></p>
<table style="width: 100%; border-collapse: collapse; margin: 0px auto; border: groove;">
<tbody>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><strong>Manufacturers</strong></div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><strong>Website</strong></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Sia Abrasives</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="https://www.siaabrasives.com/us/en/home/">https://www.siaabrasives.com/us/en/home/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Time Savers</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.timesaversinc.com/content/wood-sanders">http://www.timesaversinc.com/content/wood-sanders</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">AirVANTAGE Tools</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.airvantagetools.com/">http://www.airvantagetools.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Coilhose Pneumatics</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.coilhose.com/">http://www.coilhose.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">EAB Tools</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.exchangeablade.com/">http://www.exchangeablade.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Flex Trim Abrasives</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.flex-trim.com/">http://www.flex-trim.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Larick Machinery</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.larickmachinery.com/">http://www.larickmachinery.com/</a></div>
</td>
</tr>
</tbody>
</table>
<div class="footer">
<div class="innerFooter">
<div class="logoContainer">
<amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
</div>
<div class="footerThird">
<h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
<h1>Phone Number: (714) 287-6815 </h1>
</div>
<div class="footerThird">
<span>Copyright 2020 Reliant Industrial Supply<span>
</div>
</div>
</div>
</body>
</html>
As the title refers, my footer when less than 768px vw width(mobile), The footer just runs off the edge and I've tried changing the padding between the image and the text and it does not change. I know this script is huge but it is kind of need to show what the footer would look like, if you don't mind putting this into a editor. It would be greatly appreciated if you could help me out!
1 answers
solution1
1 ACCPTED 2020-07-19 01:44:41
The easiest thing you can do is apply display: flex to the .footer class.
Also, you should look into ways of doing that table without actually using tables. That would give the table a much better responsive look and feel.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Footer gets cut off?
Page works on desktop, but the header gets cut off on mobile devices
Fixed footer gets cut off horizontally
Web Page gets cut off
Page displayed cut off in mobile
Fixed header gets cut off on mobile phones
When I scroll horizontally my absolutely positioned footer gets cut off
Bottom of page gets cut off in Safari
iFrame Footer gets cut off when browser shrinks
Footer's background gets cut off when viewing the site on mobiles
Related Tags