I am currently trying to complete a challenge where I have encountered this issue-
I have selected certain rows and columns of the grid, but my subtitle-img class is still overlapping subtitle2 class.
Can anyone find the possible reason and solution to this problem?
My code:
body{
background: #DCE8FF;
font-family: 'Times New Roman', Times, serif;
animation: fadein 2s ease-in 0s 1 normal forwards;
}
.main-container{
display: grid;
grid-template-columns: 65% 30%;
column-gap: 5%;
}
.subtitle-content-grid{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
}
.subtitle1{
grid-column-start: 1;
grid-column-end: span col2-end;
grid-row-start: 1;
grid-row-end: span 1;
}
.subtitle2{
grid-column-start: 1;
grid-column-end: span col2-start;
grid-row-start: 2;
grid-row-end: span 2;
}
.subtitle-img{
display: -ms-flexbox;
display: flex;
height: auto;
grid-column-start: 3;
grid-column-end: span col3-end;
grid-row-start: 2;
grid-row-end: span 4;
}
.sub-img{
display: -ms-flexbox;
display: flex;
justify-content: center;
flex: 100%;
max-width: 100%;
height: auto;
}
.image-gallery{
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 50%;
max-width: 60%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (min-width: 400px) and (max-width: 1000px) {
.image-gallery {
flex: 100%;
max-width: 100%;
}
}
.image{
margin-top: 8px;
vertical-align: baseline;
width: 46%;
padding: 5px 10px 5px 5px;
}
.sidebar-content{
background: #FFE3BF;
}
.post{
border: 2px solid #FBCA8B;
margin: 5px;
}
.post>h2,p,a{
padding-left: 4px;
}
.post>a:hover{
animation: colorChange 2s ease-out 0s infinite normal;
}
.footer{
background: linear-gradient(#DCE8FF,steelblue);
height: 550px;
}
.contact-form{
margin: 10% 10% 10% 10%;padding: 2% 0 0 0;
animation: slidein 2s ease-in 0s 1 normal forwards;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit] {
background-color: rgb(39, 132, 247);
color: white;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: rgb(25, 25, 157);
}
/*Animations*/
#keyframes colorChange{
0%{
color: rgba(0, 145, 255, 0.943);
}
50%{
color: rgb(74, 74, 233);
}
100%{
color: steelblue;
}
}
#keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
#keyframes slidein {
0%{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="wsc.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Styling Challenge</title>
</head>
<body>
<div class="main-container">
<div class="main-content">
<h1>Welcome to this Challenge</h1>
<p>Here is your list of objectives:</p>
<ul>
<li>Lay out the Content & Sidebar</li>
<li>Create proper margin & spacing around items</li>
<li>Import & Use A Custom Font</li>
<li>Color Scheme: Blue & Orange (Use However you see fit)</li>
<li>Style text appropriately</li>
<li>change the background color of the sidebar</li>
<li>Style image grid however you see fit</li>
<li>Create borders around each sidebar items</li>
<li>Create grid/flexbox for image and text under "Subtitle"</li>
<li>Image grow on hover</li>
<li>Link color change on hover</li>
<li>Page animation sequence for main items (content, sidebar)</li>
</ul>
<p>Do not feel limited by the objective! change or append anything you like. Good Luck!</p>
<div class="subtitle-area">
<div class="subtitle-content-grid">
<div class="subtitle1">
<h2 class="subtitle">Subtitle 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, debitis odit. Omnis esse ea aut nisi eos ab, ipsa qui labore sed facilis, quos perspiciatis voluptates aliquid fugiat exercitationem impedit!</p>
</div>
<div class="subtitle2">
<h2 class="subtitle">Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni, quam fugit perspiciatis maiores molestias quo totam, saepe obcaecati quia, nulla itaque perferendis culpa suscipit reiciendis reprehenderit! Illum, sapiente earum!</p>
</div>
<div class="subtitle3">
<h2 class="subtitle">Topic 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officiis. Illum odio quos, magni quam illo modi rerum maxime et minus dolore autem, nihil veniam. Architecto aspernatur temporibus ipsam dolorem.</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>amet consectetur adipisicing elit!</li>
</ol>
</div>
<div class="subtitle-img">
<img class="sub-img" src="https://picsum.photos/300/300">
</div>
</div>
</div>
<div class="image-gallery">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
</div>
</div>
<div class="sidebar-content">
<div class="post">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="footer">
<div class="contact-form">
<form action="/action_page.php">
<label >First name:</label><br>
<input type="text" id="fname" placeholder="Your First Name"><br>
<label >Last name:</label><br>
<input type="text" id="lname" placeholder="Your Last Name"><br><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Try using this in .subtitle-img
grid-column-start: 3;
grid-column-end: span 3;
grid-row-start: 2;
grid-row-end: span 4;
Related
.skills {
display: grid;
gap: 1.5rem;
max-width: 300px;
margin: 0 auto;
grid-template-areas: 'one1' 'two2' 'three3' 'four4' 'five5';
}
.skillz:nth-child(1) {
grid-area: one1;
}
.skillz:nth-child(2) {
grid-area: two2;
}
.skillz:nth-child(3) {
grid-area: three3;
}
.skillz:nth-child(4) {
grid-area: four4;
}
.skillz:nth-child(5) {
grid-area: five5;
}
.content-head_links {
display: none;
}
.skillz {
border-radius: 10px;
padding: 20px;
box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
-webkit-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
-moz-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
transition: 250ms;
}
.skillz:hover {
transform: translateY(5px);
}
#media screen and (min-width:1024px) {
.skills {
max-width: 300px;
grid-template-columns: 1fr;
grid-template-areas: 'one1 two2 three3' 'four4 five5';
}
}
<div class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<img src="" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
</div>
So as you can see here, I tried to change the layout of the grid in the media query, But it isn't working, When the screen size becomes 1024px, The layout doesn't change, Despite me changing the grid template areas format, I don't know if it's something I am missing.
And whenever I set the grid template column:1fr; it doesn't change in any way.
grid-template-areas must form a rectangle, i.e. have the same amount of columns in each row.
.skills {
display: grid;
gap: 1.5rem;
max-width: 300px;
margin: 0 auto;
grid-template-areas: 'one1' 'two2' 'three3' 'four4' 'five5';
}
.skillz:nth-child(1) {
grid-area: one1;
}
.skillz:nth-child(2) {
grid-area: two2;
}
.skillz:nth-child(3) {
grid-area: three3;
}
.skillz:nth-child(4) {
grid-area: four4;
}
.skillz:nth-child(5) {
grid-area: five5;
}
.content-head_links {
display: none;
}
.skillz {
border-radius: 10px;
padding: 20px;
box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
-webkit-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
-moz-box-shadow: -1px 1px 22px -1px rgba(202, 202, 202, 0.75);
transition: 250ms;
}
.skillz:hover {
transform: translateY(5px);
}
#media screen and (min-width:1024px) {
.skills {
max-width: 300px;
grid-template-columns: 1fr;
grid-template-areas:
"one1 two2 three3"
"four4 five5 none";
}
}
<div class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<img src="" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
</div>
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
I am trying to get a flex display living in a grid to behave like I want. Upon resizing the browser, the flex area refuses to drop below 2 columns no matter what I tinker with and am at a loss as to what to do. I've just taken up markup/coding and am still in the phase of layouts. I'm trying to leverage the powers of Grid and Flex together but am having minimal luck.
Here is what I have so far....please disregard and styling as this is just me tinkering.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #333;
}
.container {
display: grid;
grid-template-columns: repeat(autofit, minmax(200px, 1fr));
grid-template-rows: autofit 250px 1fr autofit;
grid-template-areas:
"h h h"
"c c c"
"p p p"
"f f f";
}
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 0, auto;
}
.main-box {
width: 350px;
text-align: center;
justify-content: center;
margin-top: 2rem;
}
.text-wrap {
background-color: #eee;
width: 300px;
margin: auto;
}
.main-box p {
max-width: 200px;
margin: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
.green {
grid-area: h;
}
.red {
grid-area: c;
background-image: url("img/bgmain.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
}
.blue {
grid-area: p;
}
.yellow {
grid-area: f;
}
<!DOCTYPE html>
<html>
<head>
<title>Grid/Flex Test</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="container">
<div class="green">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="red">Test</div>
<div class="blue">
<div class="flex-container">
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
</div>
</div>
<div class="yellow">
<span>Copyright © Designed by: Useless Dipshit</span>
</div>
</div>
</body>
</html>
So yeah, I'm a noob.
I forgot:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That solved everything for me.
I'm new to front end design and I would like someone to help me with a grid setup that I can't figure it out. I would like to setup boxes with display: grid function as shown in the example image. Those boxes will later contain content. Can Someone please help me because I can't figure it out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b1 {
grid-area: 1 / 1 / 2 / 2;
}
.b2 {
grid-area: 1 / 2 / 2 / 5;
}
.b3 {
grid-area: 2 / 1 / 3 / 5;
}
.b4 {
grid-area: 3 / 1 / 2 / 5;
}
.b5 {
grid-area: 3 / 1 / 4/ 5;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
You can simplify your grid like below without the need of grid-areas:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b2,.b5 {
grid-column:2/span 2;
}
.b3 {
grid-column:1/span 3;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
Relevant code:
.grid {
...
grid-template-columns:1fr 1fr 1fr; /*define 3 columns*/
..
}
.b2,.b5 {
grid-column:2/span 2; /*take 2 colmuns starting from 2*/
}
.b3 {
grid-column:1/span 3; /*take 3 columns starting from 1*/
}
Your grid-areas are a bit messed up - change your grid-area definitions for b4 to grid-area: 3 / 1 / 4 / 2 and b5 to grid-area: 3 / 2 / 4/ 5.
Note the usage of grid-area when using grid lines:
If four values are specified, grid-row-start is set to the
first value, grid-column-start is set to the second value,
grid-row-end is set to the third value, and grid-column-end is set to
the fourth value.
MDN
See corrected demo below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b1 {
grid-area: 1 / 1 / 2 / 2;
}
.b2 {
grid-area: 1 / 2 / 2 / 5;
}
.b3 {
grid-area: 2 / 1 / 3 / 5;
}
.b4 {
grid-area: 3 / 1 / 4 / 2; /* CHANGED */
}
.b5 {
grid-area: 3 / 2 / 4 / 5; /* CHANGED */
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
I am trying to make a game terminal; I want to have two bars one on the top and one in the bottom and between those a scroll div needs to go to display text.
I tried doing it myself and got this as a result:
https://gyazo.com/0f98fd10e72f8ce104148b7cf51d861a
As you can see: the input field (which needs to be all the way at the bottom) and the text goes behind it and a little on.
This is how it should look:
https://gyazo.com/dbe572d83a6d00c1f45b5f1696fd4636
Code:
<div style="width: 100%; height: 100%; position: relative;">
<div style="background: #4C3C33; width:100%; color: #FFFFFF;">
<span id="gameTerminal_statusIcon">
<span class="fa fa-circle" style="color: red; width: 16px; height: 16px;">
</span>
</span>
<span id="gameTerminal_status"> Live</span>
</div>
<div class="well-md" id="gameTerminal" style="overflow-x: hidden; background: #2A211C; height: 100%; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace;">
<p>
<span id="gameTerminal_content" style="color:#80FF80; width: 100%;">
<!--game terminal content goes here-->
</span>
<style>
.gameTerminal_content_outputLine:nth-of-type(odd) {
width: 100%; background: #44362E;
}
.gameTerminal_content_outputLine {
display: inline-block;
}
</style>
<script>showLoading('gameTerminal_content', '32', 'html', '');</script>
</p>
<div id="gameTerminal_scrollHeigth"></div>
</div>
<form action="#" method="POST" onsubmit="gameTerminal_executeCommand(); return false;">
<input
type="text"
name="gameTerminal_input"
style="background: #4C3C33; width:100%; color: #FFFFFF; border: 0; outline: 0; bottom: 0px; position: absolute;"
placeholder="Type your command here..."
autocomplete="off"
/>
</form>
</div>
Thanks in advance
You can use Flexbox and just add overflow-y: scroll on div that you want to have scrollbar.
* {
box-sizing: border-box;
}
.content {
display: flex;
flex-direction: column;
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
flex: 1;
overflow-y: scroll;
}
input {
width: 100%;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>
You can also use calc() instead of Flexbox for height
* {
box-sizing: border-box;
}
.content {
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
height: calc(100% - 20px);
overflow-y: scroll;
}
input {
width: 100%;
height: 20px;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis sit consectetur ad. Eius, nam! Officia soluta incidunt obcaecati provident vero at praesentium impedit, repellat, accusamus tenetur rem eius id quisquam.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>