I used CSS Grid to create this, it is part of my website project but When I am resizing my browser window , it looks like the images of the shirt stop enlarging from a specific point , but when I shrink the browser windows everything works fine.I am very new to this and I already searched online but I could not figure it out.
I would appreciate any help
.section {
height: 100%;
width: 100%;
display: block;
}
.section.one {
background-color: rgb(6, 65, 65);
}
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-column-gap: 1%;
max-width: 70%;
margin-top: 20%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
.grid-container>div {
display: grid;
place-items: center;
}
.grid-container>div>.shirt {
grid-area: 1/1;
transition: .5s;
transform-origin: center;
display: grid;
justify-items: center;
}
.grid-container>div>.art {
grid-area: 1/1;
transition: .5s;
transform-origin: center;
display: grid;
justify-items: center;
}
.grid-container>div>.shirt>.slideup {
max-width: 100%;
/* controls the width of the shirt images */
}
.grid-container>div>.art>.scale {
max-width: 50%;
margin-top: -20%;
margin-right: 5%
/* controls the width of the art images */
}
.grid-container div:hover .shirt {
transform: scale(0);
}
.grid-container div:hover .art {
transform: scale(2);
transform-origin: center;
}
<!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>TEST</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="grid-container ">
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".4s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".6s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.2s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".8s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.4s">
</div>
</div>
</div>
</body>
It looks like the shirt img doesn't fully cover the size of the grid area, which allows the other image to further scale (if that makes sense.. maybe you see what I mean when you inspect the elements in your browser).
You can fix this by adding {width: 100%} to .grid-container>div, .grid-container>div>.shirt and .grid-container>div>.shirt>.slideup. This makes sure the img is the size of the grid, in this case it makes the img larger. If you liked the smaller shirts better, you should increase your grid-column-gap on the .grid-container.
Your png file which contains the shirt is only 300x352px large. It won't get larger than this with the methods you use. Use a larger image file to avoid this.
Related
So, I'm in the process of learning CSS Grid and I'm running into a couple of issues here. I've been messing around in the inspection panel and removing some CSS every now and then and I can't come to a solution.
First, the background-image needs to be a bit lower, but the container doesn't -- so I basically need a higher view of the photo that's shown, so it's not showing the center of the photo only if that makes sense.
Second, any time I remove position: absolute; from .bg-img the causes the second screenshot to occur, shrinking my grid...I need the grid to preserve its division of the entire page into grid-template-columns: 1fr 4fr 1fr; and not adjust to the top left corner of the page as it does.
Any ideas here/concepts I'm missing? Learning web-dev is awesome so far, but fixing issues when you don't know what's wrong is rough! haha.
Screenshot of Page:
Removing the css for position: absolute on .bg-img{} causes the below view:
Screenshot of Page post-removal:
Code:
body,
html {
background-color: black;
}
/* bg image styline */
.bg-img {
position: absolute;
background-image: url(/Practice_Site-main/imgs/nature.jpg);
background-repeat: no-repeat;
background-position: center;
outline: solid white;
border-radius: 60px;
width: 100%;
height: 50%;
filter: brightness(0.7);
}
/* top of site heading and navbar */
#mainGrid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: repeat(5, 5fr);
}
#topContainer {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
position: relative;
grid-column: 2;
grid-row: 2;
gap: 10px;
background-color: #09cc43;
border-radius: 40px;
outline: solid black;
opacity: 0.85;
filter: brightness(1) !important;
justify-content: center;
}
#siteHeader {
grid-column: 2;
justify-self: center;
text-align: center;
}
nav {
grid-column: 2;
grid-row: 2;
justify-items: center;
}
#primary-navigation {
grid-column: 2;
list-style-type: none;
justify-items: center;
}
ul {
grid-column: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<!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>TESTER</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="mainGrid">
<div class="bg-img">
<div id="topContainer">
<h1 id="siteHeader">Testing Header</h1>
<nav>
<ul id="primary-navigation" class="primary-navigation">
<li class="active">
<span aria-hidden="true"></span>Home
</li>
<li>
<a href="photos.html">
<span aria-hidden="true"></span>Photos</a>
</li>
<li>
<span aria-hidden="true"></span>About
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="homeFolio"></div>
</body>
</html>
Because position: absolute; the width and height of the bg-img element is determined by the parent element with position: relative; set, if the parent element does not set position: relative, the width and height of the bg-img will be determined according to the body element, This is what you delete position: absolute cause a width and height error
I'm making a responsive photo gallery using CSS grid. Everything is mostly fine until you stretch the browser width to above 1240px. One image should take up the space of four images but as the browser gets really big the image doesn't take up all the space that I want it to. I think it's because the original size of the image is 800x600. Any help would be greatly appreciated.
I'm doing the project on CodePen if you would like to see it: https://codepen.io/Zakkku/pen/JjrPPGo
<style>
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
#media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
#media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
}
}
</style>
<body>
<div class="gallery">
<div class="pic">
<img src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Figs" width="800" height="600">
</div>
<div class="pic noods"><img src="https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Noodles"></div>
<div class="pic"><img src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Razzberries"></div>
<div class="pic"><img src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Veggies"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Brilliant Buffet"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="More Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="lemonade"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Grapes"></div>
</div>
</body>
</html>```
Per Sujan Sundareswaran here is a working example.
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
#media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
#media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
background-image: url("https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800");
background-size: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="gallery">
<div class="pic">
<img
src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Figs" width="800" height="600">
</div>
<div class="pic noods"></div>
<div class="pic"><img
src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Razzberries"></div>
<div class="pic"><img
src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Veggies"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Brilliant Buffet"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="More Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="lemonade"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Grapes"></div>
</div>
</body>
</html>
it's working, only check below and work great. no need to more
img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: fill;
}
I have five rows in a grid layout.
There is a header row at the top.
I want the content row to fill everything it can of the available space.
I want the footer row to be at the bottom.
Between the header, content and footer rows I have two rows which just adds height spacing at 15px.
Here is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div style="height: 15px;"></div>
<div>
content
</div>
<div style="height: 15px"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</body>
</html>
Here is my CSS-code:
.body {
margin: 15px;
background: lime;
display: grid;
grid-template-rows: auto auto 1fr auto auto;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
}
I got my "headerRow" to show three columns with the middle column to fill every available space with this line in the CSS:
grid-template-columns: auto 1fr auto;
So I tried this line in the .body-block in my CSS:
grid-template-rows: auto auto 1fr auto auto;
But that didn't work :'(
What is the problem?
Maybe like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
grid-row-gap: 15px;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div>
content
</div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Why not use hr tag for adding space instead of another rows. Also if you want to make the three columns inside headerRow, Try adding float : left or adding columns from bootstrap would solve your problem.
I have some follow up questions after trying #Nikola Pavicevic solution:
Question 1:
In the html, body CSS-block the height: 100% seems to do the trick for me.But it makes the page in my web browser to have a vertical scrollbar.This scrollbar seems to be needed to show the "footer"-row.Is there anyway to decrease the height of the content row so the header row and footer row is always displayed?
Question 2:
The "content-row" seems to not fill all space available in the page.
I can see this by putting a background in the "content-row".
Is there a way to make sure the "content-row" fills all available space?
But keeps the "header-row" and "footer-row" visible.
Updated HTML:
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div class="spacerRow"></div>
<div class="contentRow">
content
</div>
<div class="spacerRow"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Updated CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
.spacerRow {
height: 15px;
background-color: yellow;
}
.contentRow {
background-color: purple;
}
In Chrome, my site is breaking on desktop and mobile.
Issues:
The second section isn't displaying the hero image correctly. The image should have two halves that when hovered, join together.
Hero images jump to the top of the page with only half of the image in view.
When I went to inspect the page, I saw the following in the console
[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively
I looked into it and came to find the fix for the said issue was to change percentages in grid-template-rows or grid-auto-rows to auto.
I applied the given fix and the issue still persisted. It only breaks in Google Chrome. The site looks fine in Firefox.
Here's the code.
HTML:
<section class="page">
<div class="details">
<h1>Skyline KPGC110</h1>
<h2>1973</h2>
</div>
<div class="hero">
<a href="./kenmeri.html">
<img class="model-left" src="./images/front-1.png" alt="model">
<img class="model-right" src="./images/front-2.png" alt="model">
</a>
</div>
</section>
<!-- ------------------------------ Seciton 2 ------------------------------ -->
<section class="page about">
<div class="details">
<h1>Skyline PGC10</h1>
<h2>1969</h2>
</div>
<div class="hero">
<a href="./pgc10.html">
<img class="model-left" src="./images/gtr-left.png" alt="chef">
<img class="model-right" src="./images/gtr-right.png" alt="chef">
</a>
</div>
</section>
<!-- ------------------------------ Section 3 ------------------------------ -->
<section class="page reel">
<div class="details">
<h1>Fairlady 240z</h1>
<h2>1973</h2>
</div>
<div class="hero">
<a href="./fairladyz.html">
<img class="model-left" src="./images/240z-left.jpg" alt="model">
<img class="model-right" src="./images/240z-right.jpg" alt="model">
</a>
</div>
</section>
Desktop view:
.page {
display: grid;
grid-template-columns: 5% 1fr 1fr 1fr 5%;
min-height: 90vh;
}
.about,
.reel {
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
opacity: 0;
pointer-events: none;
}
.hero {
display: flex; /* gets rid of gap between imgs */
align-self: center;
justify-self: center;
height: 500px;
overflow: hidden;
}
.hero a {
display: flex; /* removes seperation created by a tag */
}
.hero img {
height: 500px;
transition: transform 0.3s ease-out;
cursor: pointer;
}
Breakpoint 1(Laptop):
#media screen and (max-width: 1024px) {
.page {
grid-template-columns: 5% 1fr 5%;
grid-template-rows: 2fr 1fr;
align-items: center;
}
.hero {
height: auto;
grid-column: 2;
}
.hero img {
height: 425px;
}
}
Breakpoint 2(Mobile):
#media screen and (max-width: 768px) {
.page {
grid-template-rows: 1fr;
}
.page-1 h3 {
font-size: 1.125rem;
padding-right: 20px;
}
.hero img {
width: auto;
}
.details h2 {
font-size: 28px;
}
}
The link to the repo is here if you want to get a full look at the code.
In your code,
img {
display: block;
width: 100%;
height: 100%;
}
just remove the width: 100% and it will work fine.
assume I try to get almost similar kind of result.
So i write this code to get this this kind of box . But the code is not complete Please see my code ,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row{
width:90%;
margin-left:5%;
margin-right:5%;
}
.hig-co{
width:66.6677% !important;
max-width:66.667% !important;
min-width:66.667% !important;
}
.sm-co{
width:33.333% !important;
max-width:33.333% !important;
min-width:33.333% !important;
}
.hig-all{
width:95%;
}
</style>
<div class="container">
<div class="row">
<div class="all">
<div class="hig-co">
<div class="hig-all">
<img src="#" />
</div>
<div class="hig-all">
<div class="col-md-4 col-sm-4">
<img src="#">
</div>
<div class="sm-co">
<img src="#">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 sm-co">
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help to complete this .
Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .
Here is a simple solution using Flexbox where you can easily adjust the different sizes:
body {
margin: 0;
}
* {
box-sizing:border-box;
}
div {
border:1px solid #fff;
}
.container {
display: flex;
height: 100vh;
}
.left {
flex: 3;
display:flex;
flex-wrap:wrap;
}
.left > div:nth-child(1) {
width:100%;
height:40%;
background:red;
}
.left > div:nth-child(2) {
width:33%;
height:60%;
background:red;
}
.left > div:nth-child(3) {
flex:1;
background:blue;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
height:25%;
background:red;
}
.right > div:nth-child(2) {
flex:1;
background:blue;
}
<div class="container">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
I have a great solution with CSS Grids..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<section>
<header>
<img src="demo.jpg" alt="">
</header>
<div class="left-left">
<img src="demo.jpeg" alt="">
</div>
<div class="left-right">
<img src="demo.jpg" alt="">
</div>
</section>
<aside>
<div class="right-top">
<img src="demo.jpeg" alt="">
</div>
<div class="right-middle">
<img src="demo.jpeg" alt="">
</div>
<div class="right-bottom">
<img src="demo.jpeg" alt="">
</div>
</aside>
</div>
</body>
</html>
CSS:
.container {
display: grid;
grid-template-columns: 66.667% 33.333%;
grid-template-areas:
"section aside";
}
section {
grid-area: section;
display: grid;
grid-template-columns: 42% 58%;
grid-template-rows: 281px 501px;
grid-template-areas:
"header header"
"left-left left-right"
}
header {
grid-area: header;
}
.left-left {
grid-area: left-left;
}
.left-right {
grid-area: left-right;
}
aside {
grid-area: aside;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 150px 480px 1fr;
grid-template-areas:
"right-top"
"right-middle"
"right-bottom";
}
.right-top {
grid-area: right-top;
}
.right-middle {
grid-area: right-middle;
}
.right-bottom {
grid-area: right-bottom;
}
img {
width: 100%;
height: 100%;
}
I'm not entirely sure what you meant with "And the thin if our screen size less than this 756 then we will hide this and the maximum width of the container is 1180 px." but a simple media query would definitely do the trick here.