I am creating a fictitious website for a class project using visual studio and my site displays exactly how I want it to locally and through visual studio, but when I upload live to byethost, the CSS is not showing up properly/ there are disparities amongst browsers (which I know is normal). One of the main issues the way the images are displayed on the menu and reservation pages. Locally and in VS my images display horizontally in a scroll bar but on my live site they display stacked on top of each other vertically as if no CSS has been applied.
I am trying to diagnose why some of my CSS does not show up on the live site and find a solution to get my page to read correctly on all browsers. Any tips? I'll attach my HTML and CSS. And here is the link to my draft site: (http://www.townfinedining.byethost13.com/index.html)
<section class="main">
<div class="menu_imagebox">
<div class="scroll">
<div class="card">
<div class="card-image">
<img src="images/salmon2.jpg" loading="lazy" class="responsive"
alt="Salmon plated like starfish">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/chicken2.jpg" loading="lazy" class="responsive"
alt="Red pepper on roasted chicken">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/app2jpg.jpg" loading="lazy" class="responsive"
alt="edamame, dumplings, chicken karagge">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/juicy.jpg" loading="lazy" class="responsive"
alt="sliced wagyu beef held by chopsticks">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/friedrice.jpg" loading="lazy"
class="responsive" alt="bowl of fried rice with egg on top">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/springrolls.jpg" loading="lazy"
class="responsive" alt="plate of springrolls">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/pho.jpg" loading="lazy" class="responsive"
alt="close up bowl of pho with sriracha sauce on top">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/sushi_boat.jpg" loading="lazy"
class="responsive" alt="two decorite mini boats filled with coconut shell and sushi on top">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/dumpling.jpg" loading="lazy" class="responsive"
alt="bowl of bright orange dumpling soup">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/wagyu2.jpg" loading="lazy" class="responsive"
alt="pan of sliced wagyu beef surrounded by wasabi">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/chicken.jpg" loading="lazy" class="responsive"
alt="chicken kebabs and peppers">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/app.jpg" loading="lazy" class="responsive"
alt="takoyaki fried octopus ball appetizer">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/sushiball.jpg" loading="lazy"
class="responsive" alt="plate of crafted sushi balls">
</div>
</div>
</div>
</div>
</section>
CSS:
.menu_imagebox {
max-width: 80rem;
width: 100%;
height: auto;
padding: 0 2rem;
margin: 0 auto;
}
.scroll {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
height: auto;
padding: 1rem 0;
margin: 2.5rem 0;
cursor: default;
overflow: scroll hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0px 1.25rem;
scrollbar-width: none;
}
.card {
width: 16rem;
height: auto;
flex: 0 0 auto;
margin: 0 0.75rem;
border: none;
outline: none;
border-radius: 0.25rem;
color: black;
background: white;
}
.card-image {
position: relative;
display: block;
width: 100%;
height: auto;
padding-top: 110%;
}
img.responsive {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
