As you can see in the snippet bellow. I am trying to fit all the content but it is going out on the website, especially on the small devices (iphone x for example), parts of the content are not there. Any idea how to fix this? Thanks for any help as I dont know how to do this but presumebly something with flexbox
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
</html>
I think you can accomplish what you are looking for by adding some media queries and adjusting the width and height of the images and icons. I edited your code for a 320px screen, but you can also add one for 768px screens, etc. I also targeted your bigger images more specifically as just using img in your CSS rule, those properties were also affecting your icon images at times.
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img[src$="jpg"]{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 475px){
.text h1 {
width: 90%;
}
.icon {
width: 60px;
height: 60px;
right: -30px
}
img[src$="jpg"]{
width:250px;
height:250px;
display: block;
}
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
Related
Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexbox{
display: flex;
align-items: center;
}
nav{
padding: 10px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: static;
top: 0;
z-index: 10;
}
.navright img{
width: 25px;
margin-right: 25px;
}
.navright .profile{
width: 30px;
border-radius: 30px;
}
.navleft .menuicon{
width: 25px;
}
.navleft .logo{
width: 130px;
padding-left: 20px;
}
.navmiddle .voice{
width: 16px;
}
.navmiddle .search{
width: 16px;
}
.navmiddle .searcharea{
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
border-radius: 25px;
}
.navmiddle .searchbox{
width: 400px;
}
.sidebar{
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
padding-left: 2%;
padding-top: 20px;
z-index: -10;
}
.shortcuts a img{
width: 20px;
margin-right: 20px;
}
.shortcuts a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
width: fit-content;
}
.shortcuts a:first-child{
color: red;
}
.sidebar hr{
border: 0;
width: 85%;
height: 1px;
background: #ccc;
}
.small-sidebar{
width: 5%;
height: 200px;
}
.container{
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.container .banner{
width: 100%;
}
.small-sidebar p{
display: none;
}
.flexbox .channelpic{
border-radius: 40px;
width: 50px;
}
.listcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vidlist .thumbnail{
width: 100%;
border-radius: 5px;
}
.vidlist .flexbox{
align-items: flex-start;
margin-top: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flexbox">
<div class="navleft flexbox">
<img src="/images/menu.png" alt="" class="menuicon" >
<img src="/images/logo.png" alt="" class="logo" >
</div>
<div class="navmiddle flexbox">
<div class="searcharea">
<input type="text" placeholder="Search" class="searchbox">
<img src="/images/search.png" alt="" class="search" >
</div>
<img src="/images/voice-search.png" alt="" class="voice" >
</div>
<div class="navright">
<img src="/images/upload.png" alt="" >
<img src="/images/notification.png" alt="" >
<img src="/images/simon.png" alt="" class="profile">
</div>
</nav>
<!---sidebar-->
<div class="sidebar">
<div class="shortcuts">
<img src="images/home.png" alt="" srcset=""><p>Home</p>
<img src="images/explore.png" alt="" srcset=""><p>Explore</p>
<img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p>
<img src="images/library.png" alt="" srcset=""><p>Library</p>
<img src="images/history.png" alt="" srcset=""><p>History</p>
<img src="images/playlist.png" alt="" srcset=""><p>Playlist</p>
<img src="images/messages.png" alt="" srcset=""><p>Messages</p>
<hr>
</div>
<div class="subscriptionlist">
<h1>Subscription</h1>
<img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p>
<img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p>
<img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p>
<img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p>
</div>
</div>
<div class="container">
<div class="banner">
<img src="/images/banner.png" alt="" >
</div>
<div class="listcontainer">
<div class="vidlist">
<img src="/images/thumbnail1.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail2.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail3.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail4.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail5.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail6.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail7.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail8.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Just add word-break:break-all to .vidinfo > a.
.vidinfo > a {
word-break: break-all;
}
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
It's not my proudest moment to say that I am struggling with this since yesterday, I managed to make my gallery thumbnails look almost like the model in the picture that I uploaded, but I can't add the "image title" section. I managed at some point to put a title and the gray background, but when I hovered on it, only the image moved and not the title. Please help me so I can get rid of this problem once and forever (Thank you for your time):
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
.box > img {
width: 80%;
display: block;
background-color: cornflowerblue;
border-radius: 12%;
}
.container img:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="placeholder-image.png">
<span>daa</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>Image</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>rrrr</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
</div>
</body>
If you want the hover styling to apply to the title text and the image, just use transform on the .box container hover state instead of only the image with .container img:hover. This way both the <img> and the <span> text will "move as one" since they are both children of the .box parent container. Try this out.
.box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.box .title {
background: #ddd;
padding: .5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
img {
max-width: 100%;
}
.box > img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
/* border-radius: 12%;*/
}
.box:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
I am trying to center my image gallery without decreasing the size of the images. I tried to work with some of the solutions in similar questions but they require making the images super small. Is there a way to keep the size of my images, have my images side by side, and just center the whole thing? :D Thanks so much in advance!
Here is my code:
<style>
div.gallery {
margin: 5px;
border: 0px solid #ccc;
float: left;
text-align: center;
width: 330px;
}
div.gallery:hover {
border: 0px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 9px;
text-align: center;
display: block;
margin: 0 auto;
}
</style>
<div id="container">
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img.jpg" alt="Select Your Flavors" width="600" height="400">
</a>
<div class="desc"><h3>Choose Your Flavors</h3></div>
<div class="desc">
<p>Text</p>
<div class="center-section"><a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a></div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" alt="Get Your Box" width="600" height="400">
</a>
<div class="desc"><h3>Get Your Box</h3></div>
<div class="center-section">
<a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a><p></p>
</div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" width="600" height="400">
</a>
<div class="desc"><h3>text</h3></div>
<div class="center-section"><a class="btn button" href="">Shop Now</a></div>
</div>
<p></p>
</div></div>
i add "cover" your "gallery" div with "gallery-wrapper" class and add css for center image align.
.gallery-wrapper{
display:table;
margin:0 auto;
}
<style>
div.gallery {
margin: 5px;
border: 0px solid #ccc;
float: left;
text-align: center;
width: 330px;
}
div.gallery:hover {
border: 0px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 9px;
text-align: center;
display: block;
margin: 0 auto;
}
</style>
<div id="container">
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="Select Your Flavors" width="600" height="400">
</a>
<div class="desc"><h3>Choose Your Flavors</h3></div>
<div class="desc">
<p>Text</p>
<div class="center-section"><a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a></div>
</div>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="Get Your Box" width="600" height="400">
</a>
<div class="desc"><h3>Get Your Box</h3></div>
<div class="center-section">
<a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a><p></p>
</div>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" width="600" height="400">
</a>
<div class="desc"><h3>text</h3></div>
<div class="center-section"><a class="btn button" href="">Shop Now</a></div>
</div>
</div>
like this :https://i.ibb.co/pzz0MxF/846c4b24-6934-4447-82c1-a25b11ea581c.png
Note: always use class name as section name like "club-works" for good css under standing
You have to add css in this class
.custom-html .custom-html__code {
display: table;
margin: 0 auto;
}
I have so many divs in my website and I want to align them like this with CSS and HTML:
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">Music Name</p>
</div>
</div>
It looks like a Masonry Layout. Try the Below Code and make necessary modifications.
This snippet uses CSS-Grids. You will need to change basic styles on some grid-items to make it look exactly as yours :)
/* CSS reset */
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
position: relative;
}
html {
font-size: 62.5%;
}
/* Typography --------------------------------------------*/
body {
font-family: 'Helvetica Neue', sans-serif;
font-size: 2rem;
text-align: center;
}
.heading {
margin-bottom: 3rem;
}
.body-text {
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0 auto;
width: 70%;
}
.footer-text {
color: #fff;
font-size: 1.5rem;
}
/* Grids --------------------------------------------*/
.container {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 150px);
margin: 0 auto;
max-width: 90%;
padding: 3rem 0;
}
/* Grid images --------------------------------------------*/
.img {
border-radius: 1rem;
height: 100%;
width: 100%;
object-fit: cover;
}
/* Grid items --------------------------------------------*/
.item-4 {
grid-row: 2/5;
}
.item-5 {
grid-row: 2/6;
}
.item-6 {
grid-row: 2/4;
}
.item-7 {
grid-row: 5/6;
}
.item-8 {
grid-row: 4/6;
}
.item-9 {
grid-row: 6/11;
}
.item-10 {
grid-row: 6/7;
}
.item-11 {
grid-row: 6/9;
}
.item-12 {
grid-row: 7/12;
}
.item-13 {
grid-row: 9/13;
}
.item-14 {
grid-row: 11/13;
}
<body>
<main class="container">
<div class="item-1">
<img class="img" src="https://picsum.photos/500/300" alt="">
</div>
<div class="item-2">
<img class="img" src="https://picsum.photos/500/301" alt="">
</div>
<div class="item-3">
<img class="img" src="https://picsum.photos/500/302" alt="">
</div>
<div class="item-4">
<img class="img" src="https://picsum.photos/500/600" alt="">
</div>
<div class="item-5">
<img class="img" src="https://picsum.photos/500/800" alt="">
</div>
<div class="item-6">
<img class="img" src="https://picsum.photos/500/400" alt="">
</div>
<div class="item-7">
<img class="img" src="https://picsum.photos/500/304" alt="">
</div>
<div class="item-8">
<img class="img" src="https://picsum.photos/500/401" alt="">
</div>
<div class="item-9">
<img class="img" src="https://picsum.photos/500/900" alt="">
</div>
<div class="item-10">
<img class="img" src="https://picsum.photos/500/305" alt="">
</div>
<div class="item-11">
<img class="img" src="https://picsum.photos/500/500" alt="">
</div>
<div class="item-12">
<img class="img" src="https://picsum.photos/500/901" alt="">
</div>
<div class="item-13">
<img class="img" src="https://picsum.photos/500/700" alt="">
</div>
<div class="item-14">
<img class="img" src="https://picsum.photos/500/402" alt="">
</div>
<div class="item-15">
<img class="img" src="https://picsum.photos/500/306" alt="">
</div>
</main>
</body>
you can use grid layout
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
add this to a div and children of the div can be adjusted the way you want.
You can stack the card divs using display:flex property. Give display:flex property to your div container and flex-wrap:wrap so that the divs can wrap itself. Use any other flexbox properties you like on container after that. So your code might look like this.
<div class="card-container" style="display:flex;flex-wrap:wrap">
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
I tried I've fixed it, let me know if it is good for you:
This is also responsive..
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.card {
margin: 5px;
font-size: 30px;
text-align: center;
flex: 1 1 150px; /* Stretching */
}
img{
width: 300px
}
</style>
<body>
<div class="grid-container">
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
</body>