I am trying to create a photo gallery app. Currently, I have it so that up until four images, each image takes up 100 / n % of the div. When the number of images is more than 5, I want to make a grid appear as:
How could I achieve this? I have been reading on CSS-grid but they only seem to show examples of aligning images in one line.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<body>
<div id= "photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
</ul>
</div>
<div>
</body>
Use display: grid to achieve this. Using grid allows you to control column and row placement. Use this as a reference https://css-tricks.com/snippets/css/complete-guide-grid/
CSS
#photos-gallery {
height: 275px;
width: 634px;
}
.photos-gallery-header {
border-bottom: 1px solid #e1e1e1;
color: #333;
display: flex;
font-size: 24px;
font-weight: bold;
justify-content: space-between;
line-height: 32px;
margin: 0 0 16px;
padding-bottom: 16px;
}
.photos-gallery-content {
display: grid;
grid-template-columns: 20% 40% 20% 20%;
grid-column-gap: 0;
grid-row-gap: 0;
height: 200px;
}
.photos-gallery-content .item {
box-shadow: inset 0 0 0 1px #000;
overflow: hidden;
}
.photos-gallery-content .item-1 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1
}
.photos-gallery-content .item-2 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
.photos-gallery-content .item-3 {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
HTML
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header">2 Photos</h2>
<div class="photos-gallery-content">
<div class="item item-1">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
<div class="item item-2">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</div>
<div class="item item-3">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</div>
<div class="item item-4">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
<div class="item item-5">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</div>
<div class="item item-6">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</div>
<div class="item item-7">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
</div>
<div>
DEMO
Related
Wanted to know if a button can be displayed in the same position as the image.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
How can Image and text be displayed ina table format
I didn't really understand what you wanted, but I did it from the picture.
The code is wrong in my opinion you can read about gridd css so that in the future you can do it correctly css grid.
Or the cssportal website can help css-flexbox-generator/
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
img {
width: 100%;
height: 19rem;
}
button {
width: fit-content;
margin: 4rem auto 0rem auto;
background-color: #447bad;
border-style: none;
color: #fff;
cursor: pointer;
display: flex;
font-size: 100%;
padding: 10px 21px;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
<div class="grid-item">
<button style="background: #4CAF4F;">Green</button>
<button>Blue</button>
</div>
<div class="grid-item"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""></div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
</div>
The second method, click the image disappears, the buttons appear.
let child1 = document.querySelector("#child1");
child1.onclick = function () {
document.querySelector("#child1 > img").style.display = "none";
document.querySelector("#child1 > .btn-click").style.display = "block";
};
.grid-container {
display: flex;
grid-template-columns: auto auto auto;
}
.btn-click{
display:none;
}
img {
width: 100%;
height: 19rem;
}
button {
width: fit-content;
margin: 4rem auto 0rem auto;
background-color: #447bad;
border-style: none;
color: #fff;
cursor: pointer;
display: flex;
font-size: 100%;
padding: 10px 21px;
}
.grid-item{
width: 33%;
}
<div class="grid-container">
<div class="grid-item" id="child1">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
<div class="btn-click">
<button style="background: #4CAF4F;">Green</button>
<button>Blue </button>
</div>
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
</div>
The code is not responsive.
if you mean you want the button be inside the picture here what it is
img {
position : relitive ;
}
button {
position : absolute ;
top : 0;
left : 0;
}
I dont know where is your button tag if it is inside your div class:"colume" get it out of there
I would go about it with flexbox usage rather than float. Check out the Codepen I setup with an example in it ->
https://codepen.io/martin_f/pen/vYdYPNp
-EDIT to include relevant code here-
With flexbox usage you can go about making use of flex-direction / justify-content / align-items CSS rules to get the effect you want here ->
.row {
display: inline-flex;
width: 100%;
}
.column,
.column-btn {
display: flex;
margin-right: 1rem;
width: 300px;
}
.column img {
max-width: 300px;
}
.column-btn {
flex-direction: column;
justify-content: center;
align-items: center;
}
.column-btn button {
margin-bottom: 2rem;
width: 10rem;
padding: 1rem;
border: none;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.column-btn button:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.column-btn button.blue-btn {
background-color: #008cba;
}
.column-btn button.green-btn {
background-color: #4caf50;
}
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
</div>
</div>
<div class="row">
<div class="column-btn">
<button class="green-btn">Green</button>
<button class="blue-btn">Blue</button>
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
</div>
</div>
And you end up with something like ->
I have a Html page in which Navigation bar and footer adjust itself according to the screen width but my main content isn't adjusting itself.
I have apllied media query but it's for resolution of mobile(517 px) but when I tested it on a pc in another with less screen width it was overflowing
All the area within class"bhavya" is overflowing out of screen.
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
#media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
i hope this can some help
i added display:grid to your code and modified some of them
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
#media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
You can use the CSS overflow property.
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
I am making a grid with cards:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.navbar-brand,
.footer-text,
.page-link,
.form-input>label,
.checkbox {
color: #84a5a9 !important;
}
.wishes {
padding: 5px;
background: rgba(229, 229, 229, 0.4);
}
.wishes>span {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px !important;
/* identical to box height */
color: #84A5A9;
}
.container {
color: #84A5A9 !important;
}
.front-text {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: #84A5A9;
}
#media only screen and (max-width: 760px) {
.img {
height: 100px !important;
width: 100px !important;
}
.caption {
top: 30% !important;
}
.front-text {
font-size: 15px !important;
color: #84A5A9;
}
.bgimg-1 {
height: 700px !important;
}
.nav-title,
.wishes>span {
font-size: 14px !important;
}
.nav-logo {
height: 50px !important;
width: 50px !important;
}
.mobile {
padding: 0px 0px 0px 1px !important;
}
.form-input {
display: inline-grid !important;
}
.form-input>label,
input {
width: 100% !important;
}
.navbar-brand,
.footer-text {
font-size: 14px !important;
}
.footer-text {
width: 26% !important;
}
.footer-nav {
width: 40% !important;
}
}
.nav-logo {
height: 60px;
width: 60px;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
li:focus,
input:focus {
outline: none;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive {
max-height: 334px;
filter: grayscale(90%);
border: 1px solid #ccc;
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/*Naudojama submmito formos stulpeliams*/
label {
width: 150px;
padding-right: 20px;
display: inline-block;
}
.modal {
height: auto !important;
padding: 0 !important;
max-width: 800px!important;
max-height: 700px!important;
overflow-y: auto!important;
}
.container {
padding: 2px 16px;
}
.page-item.active .page-link {
z-index: 0 !important;
}
/* ----- NAVBAR ----- */
nav {
padding: 0px 5px 0px 20px !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1 !important;
}
nav .submit-button {
padding: 5px 10px;
margin: 5px;
}
/* ------- FOOTER ----- */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* -------- ICONS ------ */
.fa-instagram {
background: #125688;
color: white;
}
.fa {
padding: 10px;
font-size: 15px !important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 35px;
height: 35px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* PARALLAX */
.front-sd {
position: fixed;
left: 24.65%;
right: 50%;
top: 15.82%;
bottom: 43.75%;
}
.front-logo {
position: fixed;
left: 50%;
right: 19.1%;
top: 15.82%;
bottom: 43.75%;
background: url('../images/logo.png');
}
.bgimg-1 {
background: url('../images/clouds.png');
min-height: 100%;
height: 1024px;
}
.front-text {
font-size: 20px;
width: 50%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
/* opacity: 0.65; */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption {
position: absolute;
left: 0;
top: 18%;
width: 100%;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel=icon href=images/100sd.png type="image/png">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<nav class="mobile navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/100sd.png" class="nav-logo d-inline-block align-middle" alt="">
<span class="nav-title">title</span>
</a>
<div class="wishes"><span>Done: 7</span></div>
<ul class="menu">
</ul>
</nav>
<script>
</script>
<div class="bgimg-1">
<div class="caption">
<div>
<img src="images/100sd.png" class="img d-inline-block align-middle" alt="">
<img src="images/logo.png" class="img d-inline-block align-middle" alt="">
</div>
<div class="front-text">
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</span>
</div>
</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
since I have paging I want my elements take the whole grid so it wouldn't look like it's the end of data though there are next page. However on certain sizes it doesn't take the whole grid and looks like:
I tried using auto-fill and auto-fit but I am clearly doing something wrong here. Coul anyone help?
Set the min value of your minmax to 400px:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.container {
color: #84A5A9 !important;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
/*Naudojama submmito formos stulpeliams*/
.container {
padding: 2px 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
It still breaks at about 2200px but it depends on your use case as to whether that's an issue.
You can always set a max-width to prevent this:
.grid {
max-width: 1900px // Or whatever
}
I'm new here. Maybe someone can help me out here. I have mostly setup my idea for a bootstrap layout with a nested grid too. Unfortunately I can't adjust the gutter space between the columns as I need it for the rest of my layout.
What I have now:
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right: 7.5px;
padding-left: 7.5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right: 7.5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left: 7.5px;
}
.start-cat-grid {
display: block;
position: relative;
margin-bottom: 15px;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid:hover:before,
.start-cat-grid .mono,
.start-cat-grid img {
border-radius: 3px;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 4.0rem;
line-height: 1.4;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 2rem;
line-height: 130%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="test">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row no-gutter">
<div class="col-sm-5 ">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>1</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-7">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>2</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#E12882;height: 220px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>3</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="row no-gutter">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#084F8B;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>4</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#127836;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>5</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#8DBB2E; height: 220px" alt="6"></div>
<div class="align-center text-wrapper">
<h2>6</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-4">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>7</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-5">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>8</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#55ddff;height: 220px" alt="8"></div>
<div class="align-center text-wrapper">
<h2>9</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</body>
</html>
You will see that I struggle with the number 4 and 5 in the layout.
because the gutter does not work around the this two rows.
Could any one have a look please and give a hint what I can do to get the same space from 15px between column 3 to (4,5) and (4,5) to 6?
i was able to solve my problem by implementing the layout with "css grid".
with css grid it is much easier to convert equal gaps, vertical and horizontal.
.startpage-css-grid {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(12, [col] 1fr);
grid-template-rows: [row] 220px [row] 102.5px [row] 102.5px [row] 220px;
}
.box {
display: block;
position: relative;
}
.box a,
.box img {
width: 100%;
height: 100%;
}
.box a {
display: inline-block;
}
.box img {
object-fit: cover;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 36px;
line-height: 42px;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 18px;
line-height: 22px;
}
.b1 h2,
.c1 h2,
.c3 h2 {
font-size: 24px;
line-height: 30px;
}
.b1 p,
.c1 p,
.c3 p {
font-size: 16px;
line-height: 22px;
}
.b2 h2,
.b3 h2 {
font-size: 20px;
line-height: 24px;
margin-bottom: 6px;
}
.b2 p,
.b3 p {
font-size: 14px;
line-height: 18px;
}
/* first row ---------------- */
.a1 {
grid-area: a1;
grid-column: col / span 5;
grid-row: row;
background: #F8B636;
}
.a2 {
grid-area: a2;
grid-column: col 6 / span 7;
grid-row: row;
background: #754494;
}
/* second row ---------------- */
.b1 {
grid-column: col 4 / span 3;
grid-row: row 2 / span 2;
background: #127836;
}
.b2 {
grid-column: col / span 3;
grid-row: row 2;
background: #084F8B;
}
.b3 {
grid-column: col / span 3;
grid-row: row 3;
background: #E12882;
}
.b4 {
grid-column: col 7 / span 6;
grid-row: row 2 / span 2;
background: #8DBB2E;
}
/* third row ---------------- */
.c1 {
grid-column: col / span 4;
grid-row: row 4;
background: #AE1713;
}
.c2 {
grid-column: col 5 / span 5;
grid-row: row 4;
background: #ed7800;
}
.c3 {
grid-column: col 10 / span 3;
grid-row: row 4;
background: #2a6496;
}
<div class="startpage-css-grid">
<div class="box a1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box a2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b4">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
</div>
I want to make smt like this
img
Make background opacity and make visible two lines text and little picture (arrow) when hovering.
I know, i can make it just using other picture for background (make opacity in Photoshop), but i want to know how to make it with CSS
.futured {
padding: var(--product-padding);
display: grid;
grid-template-columns: repeat(4, 270px);
grid-template-rows: 1fr;
grid-gap: 30px;
}
.lamp{
background-image: url(http://anti-naruto.ru/img/product-1.jpg);
align-content: center;
padding: 30% 15px 30%;
}
.lamp p:first-child{
font-family: Montserrat;
color: #212121;
font-size: 1.369em;
font-weight: 700;
line-height: 1.369;
text-align: center;
opacity: 0;
}
.lamp p:first-child:hover{
opacity: 1;
}
.lamp p:last-child{
font-family: Montserrat;
color: #6c6c6c;
font-size: 0.871em;
font-weight: 300;
line-height: 1.578;
text-align: center;
opacity: 0;
}
.lamp p:last-child:hover{
opacity: 1;
}
.lamp:hover{
}
<div class="futured">
<div class="lamp">
<a href="#">
<p>Fishnet Chair</p>
<p>Seat and back with upholstery made of cold cure foam</p>
</a>
</div>
<img src="http://anti-naruto.ru/img/product-2.jpg" alt="">
<img src="http://anti-naruto.ru/img/product-3.jpg" alt="">
<a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></ahttps://stackoverflow.com/questions/ask#>
</div>
You need to use absolute positioning to achieve this. Please see my snippet:
.item {
position: relative;
}
.item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
}
.item:hover .overlay {
opacity: 1;
}
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>