'How to get images to display properly in scroll bar
I am trying to utilize a scroll bar that I used on a previous site I created for a food menu, but I am finding that my images are not displaying properly in the scroll no matter how much I resize them. The main issue I am having is the images are not fitting in each card box. Even when I make the images very small, they still touch the edges of the box and I know this can be adjusted in CSS, just not sure how. I'm wondering if there is an easy solution to this or if I need entirely new code. Thanks. I'll also include a live link to my mock site so you can see the issue I'm having with the images. http://www.artuciidesigns.epizy.com/portfolio2.html
/* CSS Document */
body {background-color: whitesmoke;}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
z-index: 10;
position: absolute;
background: lightblue;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
/* Headings */
h1 {
color: #067393;
font-family: athelas;
font-style: italic;
font-weight: 400;
font-size: 48px;
text-align: center;
letter-spacing: 3px;
}
h2 {
color: #067393;
font-family: athelas,
serif;font-style: normal;
font-weight: 400;
font-size: 36px;
}
h3 {
color: #067393;
font-family: athelas,
serif; font-style: normal;
font-size: 24px;
}
h4 {
color: #bc0456;
font-family: athelas,
serif;font-style: normal;
font-size: 36px;
margin-bottom: 0%;
}
/* Homepage Image */
/* Container holding the image and the text */
.home_container {
padding: 50px;
position: relative;
text-align: center;
background-color: #f99a61;
height: 500px;
}
.box {
}
.home_image {
width: 50%;
}
/* Centered text */
.home_container2 {
padding: 10px;
display: flex;
justify-content: space-around;
position: relative;
text-align: center;
background-color: lightblue;
max-height: 500px;
}
/* Footer */
.footer {
width: 100%;
height: 100px;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
position: relative;
}
.footer_content {
display: flex;
height: 100px;
text-align: center;
}
.menu_container {
text-align: center;
background-color: #BE1E2D;
}
.food {
background-color: black
}
.food h2 {
margin: 0%;
}
.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;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
<meta name="Description" content="This is Alexandria's portfolio.">
<meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.typekit.net/dmw1ifs.css">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/b ootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7 Sk" crossorigin="anonymous">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
link to your own stylesheet -->
</head>
<body>
<!--This is the body. The body contains the webpage contents such as the mission statement and vision. -->
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio2.html">Portfolio</a>
<div class="sub_menu1">
<ul>
<li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
<li><a href="Menu Designs.pdf">Menu Designs</a></li>
</ul>
</div>
</li>
<li><a href="about_Me2.html">About ME</a>
<li><a href="contact2.html">Contact</a></li>
</ul>
</div>
</section>
</header>
<br><br>
<main>
<section class="main">
<div class="menu_imagebox">
<div class="scroll">
<div class="card">
<div class="card-image">
<img src="images/Paws_logo_color.png" loading="lazy" class="responsive"
alt="Color Logo">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/Pictogram_resize.png"
loading="lazy" class="responsive"
alt="Pictogram">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/mockups_cop.jpg" loading="lazy" class="responsive"
alt="mockups">
</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>
</main>
<br><br>
<footer>
<section class="footer">
<div class="footer_content">
</div>
</section>
</footer>
</body>
<!-- JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe r.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384- OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-->
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|