When i use the responsive tool of Chrome(<699pw) it create a huge gap between the footer and the div base but i want the footer a the bottom of the page. I don't know if it is the grid of the parent . I want to extend the base and make it closed to the footer so even if we extend the responsive tool. So it'has to follow the footer
header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 3; }
#bases{
display: grid;
grid-template: auto;
grid-template-columns: 2fr 4fr;
}
html,body{
margin: 0;
padding: 0;
}
/* Responsive */
#media (max-width: 699px){
#Titre {
display: none;
}
header {
background-color: #aa1010;
font-family: 'LexendTera';
color: white;
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 10px;
position: relative;
top: 50%;
}
aside{
display: none;
}
#bases{
display: grid;
grid-template-columns: 1fr;
}
.parent{
display: grid;
align-items: center;
}
/* Mettre footer en bas de page */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="fr">
<body>
<header>
<img src="img/logo.png" alt="logo" id="logo">
<h1 id="Titre">O'kebab</h1>
Composition
Connexion
</header>
<div id="bases">
<main>
<h1>"La maison du sandwich"</h1>
<div class="parent">
<div class="div1"><h1>Promotion</h1><p>Kebab Végetarien -50%</p> </div>
<div class="div2"><img src="img/vege.png" alt="vege"></div>
<div class="div3"><h1>Kebab du mois</h1><br><p> Kebab spicy</p></div>
<div class="div4"><img src="img/spicy.webp" alt="spicy"></div>
<div class="div5"><button>Commandez</button></div>
</div>
</main>
</div>
<footer>
<h2 id="contact">Contact</h2>
<h2 id="mention">Mentions légales</h2>
<img src="img/facebook.png" alt="facebook" id="face">
<img src="img/instagram.png" alt="instagram" id="insta">
<img src="img/iutly.png" alt="twitter" id="ly1">
<h3 id="tkt">© 2022 O'kebab</h3>
</footer>
</body>
</html>
I tried to use position:relative for the body but nothing change
The grid is fine,
In the screen size less than 699px width:
You made the header smaller by reducing its font size. And since a div is a block element by default, it would be positioned in a new line after the last element. So your "bases" div would be on top and attached beneath the header.
You forced the footer to be positioned fixed and go to the bottom of the page.
So naturally, there would be a gap between your "bases" and your "footer".
Now since the element positioned fixed is removed from the normal document flow, and no space is created for it on the page, you can't position the "bases" div relative to the "footer".
But, for fixing the gap between your divs there are many ways...
For example, you can add a height to your "bases" div and make it fill the gap.
If you want it to be responsive, instead of an absolute height you can give it a relative height, like using "%" or "vh":
#bases {
/* Relative to % of the height of the viewport */
height: 80vh;
}
And you can adjust the position of contents by "display flex" and "align-items" or maybe using padding and margins.
You can also make it "position absolute" as well and position it somewhere in the middle of the page. as I said there are many ways to fill that gap.
And a quick tip for using media queries, If you want to change an attribute of an element, you don't need to write all of its attributes again.
for example, if you have this code and you want to change its font size:
.header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
You can just change the font size, and there is no need to duplicate all of that code:
#media (max-width: 699px) {
.header {
font-size: 10px;
}
}
Related
I am new to CSS and HTML and have a setup of divs in CSS, something like this:
#topBar {
margin-top: 0;
height: 100px;
width: 100%
}
#sideBar {
width: 50px;
margin-left: 0;
margin-top: 100px;
height: 100%;
}
#main {
margin-left: 50px;
margin-top: 100px;
margin-bottom: 50px;
}
#footer {
margin-bottom: 0;
width: 100%;
}
<div id="container">
<div id="topbar" />
<div id="sidebar" />
<div id="main" />
<div id="footer" />
</div>
But that does not look anything like how I want it. It leaves space for every div, even though their space is restricted to x width and x height.
How could I set up divs to look as desired? Ie have a footer, main, sidebar, and topbar in CSS?
CSS actually has built in grid "builder" that you can use. I was doing something similar not long ago and ended up doing it like this:
#container {
display: grid; //uses grid
height: 100vh; // vh and vw is percentages of the screens width and height, nice for scaling for different devices
width: 100vw;
grid-template-columns: 1fr 9fr; // sets how big columns are, this sets the column quantity to two, and the first one gets 1 fraction of the are, and column two gets 9 fractions. 1fr is for sidebar
grid-template-rows: 1.5fr 15fr 3fr; // Same as with column, but this includes footer, so 1.5 fraction goes to top bar, 15 fractions to sidebar and main area, and 3 fractions to footer
grid-template-areas:
"header header" // sets area to use, the same area given space in above lines. They can be directly referenced in other parts of the css documents.
"navbar main"
"footer footer";
}
#topbar {
grid-area: header; // Referencing previous made areas
display: flex; // I used this to make the top bar, as this would align the items in the bar horizontally with same amount of space between
justify-content: space-between;
align-items: center; //used this to center items vertically
}
#sidebar {
grid-area: sidebar;
text-align: center; // used this to align the text center horizontally
}
#main {
grid-area: main;
}
#footer {
grid-area: footer;
}
You should use the semantic tags such as the header, nav, aside, footer and main.
Then apply the grid directly to the body element instead of wrapping them in an extra container:
body {
margin: 0; /* removes default margin */
display: grid; /* uses grid */
min-height: 100vh; /* will expend the grid to the entire viewport */
grid-template-columns: 1fr 2fr; /* sets the column width and amount */
grid-template-rows: min-content auto min-content; /* sets the row height to push the footer at the bottom and let the main fill the rest */
gap: 5px; /* placing the items apart */
}
header,
footer {
grid-column: 1 / -1; /* letting those element span the entire row */
}
/* for styling purpose only */
header,
aside,
main,
footer {
border: 2px dashed red;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
<header>Topbar</header>
<aside>Sidebar</aside>
<main>Main</main>
<footer>Footer</footer>
I'm currently working on a project, in which I have to display images in a grid layout. The natural thing for me was to use CSS grid. I have a working solution, which looks good only for certain aspect ratios (portrait aspect ratios). As soon as the aspect ratio is more on the landscape side (especially 16:9), the overall grid doesn't fit the screen anymore. It seems that the images are the problem because they don't "scale" vertically.
Looks good for "portrait" aspect ratios:
Looks bad for "wide" aspect ratios:
.container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.client {
display: grid;
border: 3px solid black;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
}
.client-title {
grid-column: 1 / -1;
grid-row: 1;
}
.client-description {
grid-column: 1 / -1;
grid-row: 6;
}
.exercise-image {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="container">
<div class="client">
<div class="client-title">
Title Text 1
</div>
<!-- Repeated 8 times -->
<div class="exercise">
<img class=" exercise-image " src="https://via.placeholder.com/300.jpg">
</div>
<div class="client-description ">
Description Text 1
</div>
</div>
<div class="client ">
<div class="client-title ">
Title Text 2
</div>
<!-- Repeated 8 times -->
<div class="exercise">
<img class="exercise-image" src="https://via.placeholder.com/300.jpg">
</div>
<div class="client-description">
Description Text 2
</div>
</div>
</div>
Do you have an idea, what I miss here?
Thanks!
Set the height of the .client grid directly to full viewport height and remove height: 100vh of its grid container element .container.
That works because now the heights of the grid rows of the '.client' grid get calculated directly relative to viewport's current height.
And the containing element adapts to that childs height accordingly.
Set the min-height of the .exercise grid item, that contains each rows image, to 0 to override the default value (min-width/min-height: auto is the CSS Grid default setting) and thus, to make the image shrinkable below its own size.
CSS:
.container {
position: fixed;
top: 0;
left: 0;
// height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.client {
display: grid;
border: 3px solid black;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
height: 100vh; // height: 100%;
}
.client-title {
grid-column: 1 / -1;
grid-row: 1;
}
.client-description {
grid-column: 1 / -1;
grid-row: 6;
}
.exercise {
min-height: 0;
}
.exercise-image {
object-fit: cover;
width: 100%;
height: 100%;
}
I'm building my first real webpage and I'm trying to figure out how to stack the elements on the home screen correctly. I've read and tried similar posts but they don't seem to do what I need. Currently my homepage looks like this (ignore the list at the bottom of the page and subscribe/ login buttons. They are just part of the default theme):
This was achieved using the following code:
HTML:
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
CSS:
#media (min-width: 1001px) {
.disc-pic-parent {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description{
text-align: left;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description-header{
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img{
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
grid-column: 2 / span 2;
}
}
My goal is to try and get it to look something like this sketch:
The idea of using a grid for the main layout is fine and will keep your text at a constant width even if it is too long, but you also have put a grid in your left hand box which isn't the layout your desired image shows. You have also given the img defined dimensions and yet defined column spans for the grid.
This snippet just takes it that you want the img to have the given dimensions so removes the extra grid information.
#media (min-width: 1001px) {
.desc-pic-parent {
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description {
text-align: left;
min-height: 280px;
border-top: 0;
}
.homepage-description-header {
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img {
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
}
}
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
NOTE: you probably want to take some of the styling out of the media query and have it there for all viewport dimensions.
This can be simply achieved using flexbox.
Just wrap those two div's inside another div and give display: flex to that div.
I have a CSS grid layout - for this question I will use a simple example -> 1 row, 4 columns (2 areas).
In grid areas, I have a text with different font sizes. I would like to align the text to each other but can't figure it out.
I didn't find similar questions but maybe I searched for wrong phrases.
EDIT: Both must be aligned to the bottom line. Font-size is calculated. Code and example have been modified.
.timer {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
display: flex;
font-size: calc(1em + 3vw);
background-color: blue;
align-items: flex-end;
}
.timer-value {
grid-area: timer;
font-size: calc(1em + 9vw);
background-color: green;
}
<div class="timer">
<div class="timer-label">
<span>Processing...</span>
</div>
<div class="timer-value">
<span>00:55</span>
</div>
</div>
Result:
Expected result:
I would like to have the bottom of "Processing..." text aligned to the bottom of the timer so both are in the same line (red line on print screen).
JS Fiddle:
https://jsfiddle.net/sores/m1uhLewy/7/
Make Following change in your CSS Code
.timer {
align-content: start;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
display: flex;
font-size: 30px;
background-color: blue;
align-items: flex-end;
line-height: 70px; /* Add this Line */
}
.timer-value {
grid-area: timer;
font-size: 75px;
background-color:green;
line-height: 70px; /* Add this Line */
}
Explanation: The problem is your font size is different for the Processing text and the time causing the issue in height, You can specify the line-height property and make the design consistent. You can adjust the value of line height based on your preference.
One trick is to bring the font-size of each section to the other one in order to get the same basline. You can do it with by using pseudo element like below:
.timer {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
font-size: calc(1em + 3vw);
background-color: blue;
}
.timer-value {
grid-area: timer;
font-size: calc(1em + 9vw);
background-color: green;
}
/**/
.timer-value:before {
content:"";
font-size: calc(1em + 3vw);
}
.timer-label:before {
content:"";
font-size: calc(1em + 9vw);
}
<div class="timer">
<div class="timer-label">
<span>Processing...</span>
</div>
<div class="timer-value">
<span>00:55</span>
</div>
</div>
in class .timer-label just change align-items: center; that's it
I need two pictures to overlap in a CSS grid layout without cheating and it has to be done with CSS grid. Means it should stay in the layout cells. Here is what I'm working on:
"The middle" should be centred in the picture and both centred on the page, respectively the "banner"-cell
The following CSS layout should stay the same desirably:
.container {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-gap: 2px;
grid-template-areas:
'banner banner banner'
'sidebar content fb'
'sidebar content fb'
'sidebar content fb'
'src src src';
}
.banner {
grid-area: banner;
}
I already tried these methods:
justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;
The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture. It would be possible to apply a padding to the "banner" cell to push down the content but this is the kind of cheating I want to avoid.
I need those 2 pictures to stay overlapping in this "banner" cell, but I am running out of options and there are not a lot of answers out there due to the fact that the CSS grid is pretty new.
The HTML:
<body class="body">
<div class="container">
<div class="banner">
<img id="skyline" src="Pictures/SkylinePH.jpg">
<img id="logo" src="Pictures/Logo2.png">
</div>
</div>
I am very grateful for any help! Thank you in advance :)
Text over Image. With CSS Grid Layout.
HTML
<div id="container">
<img src="some-image.jpg">
<p>SOME TEXT OVER IMAGE</p>
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container img{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container p{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
Image over Image. With CSS Grid Layout.
HTML
<div id="container">
<img id="img-1" src="image-1.jpg">
<img id="img-2" src="image-2.jpg">
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container #img-1{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container #img-2{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture.
You don't need to position: absolute both images - you could have the banner image, which is larger and going to be behind the logo, occupy the space it normally would in the CSS grid cell. Then you could absolute position and center the logo on top of it. Would that work?
EDIT: Some CSS to try for accomplishing this:
.banner {
position: relative; /* so we can position the logo based on this container */
text-align: center; /* so the skyline image is horizontally centered */
}
#logo {
position: absolute; /* these 4 lines will center the logo */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
With css grid there is no need for absolute or relative positioning any more. Don't forget in css grid you can stack grids on top of each other by giving them same grid-row and grid-column values and then use z-index. Pretty powerful :) hope this helped