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.
Related
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;
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 have tried every solution I could find on the web on this subject. I have come to the conclusion that the problem may be that my page contains a scroll-snap-type.
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
This is an overview of the div that I would like to scroll horizontally.
<section id="work">
<h2>WORK</h2>
<div id="carrousel">
<div class==="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit rerum voluptas iusto ipsam officiis
earum atque unde nesciunt provident ullam rem ea tempore.</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum<h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
</div>
</section>
#carrousel {
display: flex;
flex-direction: row;
height: 70vh;
width: 100vw;
}
#work {
background-color: #0F0F0F;
color: white;
display: flex;
flex-flow: column;
justify-content: center;
}
If I understand you correctly, to fix your issue, you can simply in your CSS (stylesheet) type the following code:
#carrouse1 {
overflow-x: auto;
}
...and do the same thing if you have more than one
If you want to make another section be horizontally scrolled, then just use the same CSS property on that too!
I am following a series of Traversy Media videos for creating a portfolio website. I have a foundational knowledge of HTML/CSS. We have to create a grid and no matter what I do, I cannot get the grid to show up in my browser (Chrome). The grid will be for the About info on the about page. Also the footer isn't showing up for some reason. Any help would be greatly appreciated.
Here is the about.html
<!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">
<script src="https://kit.fontawesome.com/31d2c226f4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<title>About Me</title>
</head>
<body>
<div class="overlay"></div>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
<a href="/" class="nav-link">
Home
</a>
</li>
<li class="nav-item current">
<a href="about.html" class="nav-link">
About Moi
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="Contact.html" class="nav-link">
How to Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="about">
<h1 class="lg-heading">
About
<span class="text-secondary">Me</span>
</h1>
<h2 class="sm-heading">
Let me tell you a few things...
</h2>
<div class="about-info">
<!-- <img src="img/portrait.jpeg" alt="Alex Gool" class="bio-image"> -->
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2021
</footer>
<script src="js/main.js"></script>
</body>
</html>
And here is the main SCSS file
// Move variable and functions to _config.scss file. This helps tidy up the main.scss file and makes the code more readable. Use #import then the file name (NOT WITH THE .scss EXTENSION).
#import "config";
#import "menu";
// Ensures inside padding will not affect height/width of box, it will just be in the box itself.
* {
box-sizing: border-box;
}
body {
#include background;
background: $primary-color;
color: set-text-color($primary-color);
height: 100%;
margin: 0;
font-family: "Segoe UI", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
}
// Headings
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
&.lg-heading {
font-size: 6rem;
}
&.sm-heading {
margin-bottom: 2rem;
padding: 0.2rem 1rem;
// Background to heading information will be lighter.
// Wrap in RGBA function, 0.5 is the opacity.
background: rgba(lighten($primary-color, 2), 0.5);
}
}
a {
color: #fff;
text-decoration: none;
}
// Header (icon) is fixed so it stays at top right when user scrolls through the webpage.
header {
position: fixed;
z-index: 2;
width: 100%;
}
.text-secondary {
color: $secondary-color;
}
// Nesting the .icons class so that only the icons in the main tag will be affected. This is specific to SASS.
main {
padding: 4rem;
// height: 100%;
min-height: calc(100vh - 60px);
.icons {
margin-top: 1rem;
color: set-text-color($primary-color);
// Inside the div class "icons", each icon is wrapped in a link.
a {
padding: 0.4rem;
// Putting the & in things is specific to SASS, this is not a feature of normal CSS.
&:hover {
color: $secondary-color;
#include easeOut();
}
}
}
&#home {
// This makes it so that there will never be scroll bars.
overflow: hidden;
h1 {
// This brings my name down closer to the middle of the page.
margin-top: 20vh;
}
}
}
.about-info {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas:
"bioimage bio bio"
" job1 job2 job3" !important;
.bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.bio {
grid-area: bio;
font-size: 1.5rem;
}
.job-1 {
grid-area: job1;
}
.job-2 {
grid-area: job2;
}
.job-3 {
grid-area: job3;
}
.job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
}
#main-footer {
text-align: center;
padding: 1rem;
background: darken($primary-color: 10);
color: set-text-color($primary-color);
height: 60px;
}
#import "mobile";
I took this snippet from the code you linked and rewrote it without SCSS so it can compile below. It seems to me like display: grid is working just fine. If you open the chrome dev tools and inspect, you will see a "grid" label on the .about-info element.
.about-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "bioimage bio bio" " job1 job2 job3" !important;
}
.about-info .job-1 {
grid-area: job1;
}
.about-info .job-2 {
grid-area: job2;
}
.about-info .job-3 {
grid-area: job3;
}
.about-info .bio {
grid-area: bio;
font-size: 1.5rem;
}
.about-info .bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.about-info .job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
<div class="about-info">
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
I know a solution to create equal height columns using display:table like:
.row {
display: table;
width: 100%;
}
.col{
display: table-cell;
}
but my case is a bit different, since I am using flexbox and row class has display:flex:
.row {
display: flex;
display: ms-flex;
flex-wrap: wrap;
}
and all cols have .large-4 class:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
}
I can't use flex:1 for .large-4 as well because it varies in different viewport.
here is a snippet of html:
<div class="row">
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio
optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
veritatis.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio.
</p>
</div>
</div>
</div>
</div>
code-pen link can be found here! how to I acheive equal height columns using flexbox? or any other better solution. thanks
You need to add display: flex to the .large-4 element:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
display: flex;
}
You'll notice when you inspect your elements using the inspector tool, large-4 elements are actually all the same height. It's the content inside that is not. So by making the parent element flex, it will make the children elements fill the space.
You already have equal-height columns, but inside them is a container that is contracting to its content. Expand that container.
.card {
height: 100%;
}