<!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;
}
amp-carousel {
padding-top: 20em;
}
@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);
}
}
amp-carousel {
padding-top: 60em;
}
.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">
<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="900"
width="auto"
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>
If you look at the amp-carousel tag, the validator says that the width: auto; is invalid. I have tried solutions such as giving it a specific pixel number, but if enter different numbers it just stays stuck to one size until I dramatically change the size. I don't think this is a bug and it is probably on me, but it does work sometimes and I have no idea why. Are there any ways around it and how do I fix it. Also , to note, sometimes when I paste in the code, it does not give me a validation error; Which was super strange! Thanks for looking into it!
amp documentation:
"For some layouts, AMP components must have a width and height attribute that contains an integer pixel value."
So no, you unfortunately can't have width="auto" attribute in <amp-carousel>. That's invalid.
but if [I] enter different numbers it just stays stuck to one size until I dramatically change the size.
I'm not entirely sure what you mean by "stuck to one size", but you have amp-carousel's padding-top set to 20em and then you override it to 60em again, which causes the element to be too tall for the view when using sensible width and height attributes. I tested it by removing the padding and setting height and width to 600 and 800 respectively, and it looks ok to me.
<amp-carousel
layout="responsive"
type="slides"
height="600"
width="800"
...