I would like to create a webpage with a section that scrolls horizontally using flexbox. However, the code results in each box being reduced in size to fit the screen, rather than overflowing and enabling for horizontal scrolling.
Code:
.main {
flex-direction: row;
-webkit-flex-direction: row;
overflow: scroll;
width: 100%;
height: 100vh;
}
.portfolio_item {
width: 50%;
}
.flex {
display: flex !important;
display: -webkit-flex !important;
}
<div class="main flex">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>
If you add a min-width of 50% (as well as the width of 50%) to your child portfolio items, your code works (with overflow and scrolling).
Hope this helps
.main {
flex-direction: row;
-webkit-flex-direction: row;
overflow: scroll;
width: 100%;
height: 100vh;
}
.portfolio_item {
min-width: 50%;
width:50%;
}
.flex {
display: flex;
display: -webkit-flex;
}
<div class="main flex">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>
Not sure if using flex is necessary, since flex is to help avoid the overflow situation amongst other things.
Here is a very simple example without flexbox utilising the overflow-x: scroll; and white-space: nowrap; attributes. The first allows the div to be scrollable, and the second prevents white space from wrapping around to a new line
.container {
overflow-x: scroll;
white-space: nowrap;
}
.box {
display: inline-block;
border: 1px solid black;
margin: 5px;
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
I'm not sure flexbox is actually the tool for this job. The premise behind flexbox is that your elements flex to fit inside the box. However, you specifically want them to overflow your box, not fill the available space in your box.
From css-tricks.com:
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space [...] A flex container expands items to fill available free space, or shrinks them to prevent overflow.
It might make more sense to enable horizontal scrolling by using a layout based on inline-block and white-space: nowrap like this:
.main {
overflow-x: auto;
white-space: nowrap;
}
.portfolio_item {
display: inline-block;
margin: 0 30px;
}
<div class="main">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>
Related
I try to implement this graphic with HTML, CSS using flexbox:
Now, I have trouble with the left part. I don't know how to implement this -90 degrees rotated element. The right part (all elements that are horizontally aligned) is not the problem.
Here is what I have so far:
.container {
max-width: 1176px;
width: 100%!important;
margin: 0 auto!important;
float: none!important;
z-index: 1;
}
.pt {
padding-top: 3.5rem;
/* 56px */
}
.pb {
padding-bottom: 3rem;
/* 48px */
}
.ptms {
padding-top: 1.5rem;
/* 24px */
}
.full-width {
width: 100%;
padding: 0 1.5rem;
}
.three-col {
width: 33.3333334%;
padding: 0 1.5rem;
}
.platform-container,
.platform-card-container {
display: flex;
}
.platform-card-container .three-col,
.platform-card-container .full-width {
padding: 0 .75rem;
}
.platform-card-container a {
text-decoration: none;
}
.platform-card,
.platform-card-first {
border-radius: .5rem;
box-shadow: 0 .25rem .75rem 0 rgba(27, 27, 27, 0.24);
display: flex;
height: 100%;
}
.platform-card {
align-items: center;
}
.platform-card-first {
}
.platform-card-icon {
padding: .75rem;
border-radius: 50%;
background-color: #f5f5f5;
width: 3.5rem;
height: 3.5rem;
min-width: 3.5rem;
}
.platform-card-text {
margin-left: 1rem;
}
.platform-card-text-title {
margin-bottom: .5rem;
color: #1b1b1b;
}
.platform-card-text-desc {
color: #007095;
}
<div class="container platform-container">
<div>
<div class="pt platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card-first">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-technology-3d-printing-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Open Architecture</h4>
<div class="platform-card-text-desc">Extend systems as required</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="pt platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-design-ruler-triangle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">User Interface</h4>
<div class="platform-card-text-desc">Modern front-end technologies</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-mobile-phone-location-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Intelligent Mobility</h4>
<div class="platform-card-text-desc">Mobile and offline access</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-network-monitor-team-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Social Collaboration</h4>
<div class="platform-card-text-desc">Efficient teamwork</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-toys-lego-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Low-Code Suppport</h4>
<div class="platform-card-text-desc">Processes without programming</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-multimedia-shuffle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Business Rule Engine</h4>
<div class="platform-card-text-desc">Intelligent decision making</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-programming-module-puzzle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Integration</h4>
<div class="platform-card-text-desc">Standard connectors and more</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-transportation-road-sign-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Adaptive Case Management</h4>
<div class="platform-card-text-desc">Making processes flexible</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-interface-settings-cog-double-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Process Engine</h4>
<div class="platform-card-text-desc">Powerful process automation</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-work-presentation-projector-screen-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Modern Runtime Platform</h4>
<div class="platform-card-text-desc">Environment with container support</div>
</div>
</div>
</a>
</div>
</div>
</div>
Does anyone have a hint on how I should proceed?
I believe these styles are what you want:
text-align: right;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-orientation: mixed;
https://jsfiddle.net/aycq2v8u/
edit: I noticed that the height still wasn't right. (BTW, display:grid makes this sort of thing easier). here's a revision with that fixed as well. although, this does require either ridiculous looking selectors or changes to the html, which I have done here: https://jsfiddle.net/rxgbo4a9/
changes required:
the card container of the first card (that needs to be full height) needs to be different. since it is on the side and generally different content, I marked it as an aside:
<aside class="pt platform-card-container">
then, with that, using minimal changes to your css we get the desired result:
aside.platform-card-container {
height:100%
}
aside.platform-card-container a {
display: flex;
height: 100%
}
note that specifying height instead of using flexbox is not ideal. however, since all your code makes the same mistake, I think you minimize technical debt to keep all the problems of the same type .. ie, keep using height until you are ready to remove it generally.
I have a page where the left and right are split evenly. On the right side, I have a bunch of div elements containing an img and a span. What I'm trying to do is show four of these div elements at MOST per row, and start to wrap on smaller screens, with a specific gap.
The problem I'm having is the gap is wider on bigger screens, and the elements squish together on smaller screens instead of wrapping, regardless of what gap value I set.
Here's a gif showing what's happening: https://gfycat.com/remorsefulglossyherring
Here's the relevant HTML (only the right side of the page which contains these divs):
<div
class="about"
fxFlex="50%"
fxLayout="row wrap"
fxLayoutGap="10px grid"
fxLayoutAlign="center center"
>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/c-sharp.png" alt="C#" />
<span class="caption">C#</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/.net-core.png" alt=".NET Core" />
<span class="caption">.NET Core</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/wpf.png" alt="WPF" />
<span class="caption">WPF</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/winforms.jpg" alt="WinForms" />
<span class="caption">WinForms</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/angular.png" alt="Angular" />
<span class="caption">Angular</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/nodejs.png" alt="NodeJS" />
<span class="caption">Node.js</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/html5.png" alt="HTML5" />
<span class="caption">HTML5</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/css3.png" alt="CSS3" />
<span class="caption">CSS3</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/mongodb.png" alt="MongoDB" />
<span class="caption">MongoDB</span>
</div>
<div fxFlex="25%" class="item">
<img
class="img-skills"
src="assets/mssql.png"
alt="Microsoft SQL Server"
/>
<span class="caption">Microsoft SQL Server</span>
</div>
</div>
Here's the css:
.about {
min-height: 100vh;
justify-content: center;
height: 100%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
.img-skills {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
This is the simple idea, but this will help you for sure to start with:
Play around here : fiddle
.MainDiv {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
}
.first {
border: 1px solid black;
height: 100px;
width: 100px;
background-color: gray;
margin: 5px;
}
<div class="MainDiv">
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
</div>
Make it both left and right divs separated with the main container.
Your right side div should be like this below.
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div>
<div>2. Two</div>
<div>3. Three</div>
<div>4. Four</div>
</div>
I need a vertical divider and the text to line up exactly like this on the top right hand corner of my screen.
I am having some trouble even getting the divider to show and the text to pull right
<div class="row">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
Css
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}
I can see that bootstrap 4 tag is added to your question. If you are using bootstrap 4, there is a in-built flex utility https://getbootstrap.com/docs/4.0/utilities/flex/
<div class="d-flex flex-row justify-content-end">
<div class="">
<span>Profile & Settings</span>
</div>
<div class="mx-2">|</div>
<div class="">
<span>Logout</span>
</div>
</div>
JS Fiddle: https://jsfiddle.net/8p27xwcs/
use "container" instead of "row", or set display:inline or block on the row div.
<div class="row" style="display:inline;" >
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
or
<div class="container">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
Here is my code:
.region-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="region region-footer">
<nav role="navigation" aria-labelledby="block-mytheme-footer-menu" id="block-mytheme-footer" class="contextual-region">
<ul class="menu menu--footer nav">
<liAbout
</li>
<li>Contact</li>
<li> Privacy Policy</li>
</ul>
</nav>
<section data-quickedit-entity-id="block_content/16" id="block-socialmedia" class="contextual-region block block-block-content block-block-content3e0c4d11-72cf-4565-ae42-0da66a2df37d clearfix" data-quickedit-entity-instance-id="0">
<div data-quickedit-field-id="block_content/16/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
<div class="social-media">
<a class="social-a" href="https://twitter.com/">
<img src="/themes/img/twitter.png">
</a>
<a class="social-a" href="https://www.instagram.com/">
<img src="/themes/img/instagram.png">
</a>
<a class="social-a" href="https://dribbble.com/">
<img src="/themes/img/dribbble.png">
</a>
</div>
</div>
</section>
<section data-quickedit-entity-id="block_content/14" id="block-copyright" class="contextual-region block block-block-content block-block-contentd9975090-e973-43a8-bd2d-ec3a21f65f51 clearfix" data-quickedit-entity-instance-id="0">
<div data-quickedit-field-id="block_content/14/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
<div class="copyright">
<p>© MySite 2019</p>
</div>
</div>
</section>
</div>
Here is what my website looks like and what I'm trying to achieve: https://imgur.com/a/FEa4GVQ
I've tried experimenting with align-self on each item, setting the copyright to margin-right: auto, setting each element to width: 50% etc. but nothing is working
Flexbox Solution
Here is a simple example. Both items on the first row take up 50% of space. The last item is pushed to the far right using margin-left: auto.
.container {
display: flex;
flex-wrap: wrap;
}
.one, .two {
flex-basis: 50%;
}
.two {
text-align: right;
}
.three {
margin-left: auto;
}
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
jsFiddle
Grid Solution
There are many ways to handle this using Grid—I just picked this one because I like grid-template-areas. Note: the dot (.) in Grid represents an empty grid area.
.container {
display: grid;
grid-template-areas: "one two"
". three";
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.two, .three {
text-align: right;
}
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
jsFiddle
You can wrap two section elements within div element
<div class="region region-footer">
<nav role="navigation" aria-labelledby="block-mytheme-footer-menu" id="block-mytheme-footer" class="contextual-region">
<ul class="menu menu--footer nav">
<li>About</li>
<li>Contact</li>
<li>
Privacy Policy
</li>
</ul>
</nav>
<div class="right-content">
<section data-quickedit-entity-id="block_content/16" id="block-socialmedia" class="contextual-region block block-block-content block-block-content3e0c4d11-72cf-4565-ae42-0da66a2df37d clearfix" data-quickedit-entity-instance-id="0">
<div data-quickedit-field-id="block_content/16/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
<div class="social-media">
<a class="social-a" href="https://twitter.com/">
<img src="/themes/img/twitter.png">
</a>
<a class="social-a" href="https://www.instagram.com/">
<img src="/themes/img/instagram.png">
</a>
<a class="social-a" href="https://dribbble.com/">
<img src="/themes/img/dribbble.png">
</a>
</div>
</div>
</section>
<section data-quickedit-entity-id="block_content/14" id="block-copyright" class="contextual-region block block-block-content block-block-contentd9975090-e973-43a8-bd2d-ec3a21f65f51 clearfix" data-quickedit-entity-instance-id="0">
<div data-quickedit-field-id="block_content/14/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
<div class="copyright">
<p>© MySite 2019</p>
</div>
</div>
</section>
</div>
</div>
Remember CSS of two sections should use display: block; for one is at top and the other is at bottom.
I have a grid I have built out of flex boxes. Some of the grid is made of squares, with two rectangles. I can't seem to get the boxes to align correctly, using flexbox with flex-grow, or manually setting the box heights. The goal is to have them all line up with equal margins between the entire grid. Here is the grid code:
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:800px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
For easy viewing, here is a codepen I've made: https://codepen.io/bsquared/pen/zdPqPJ
As commented, if you involved <a> in your flex layout and also to draw the background, you can achieve the visual you look for.
a {
/*with no fix height so it can be spread evenly if needed*/
background: blue;
/* draw bg here it will include children area and further if needed to even the visual */
margin: 10px;
/* set margins here */
color: white;
}
/* flex layout and sizing */
.flex,
a {
display: flex;
}
.column,
a {
flex-direction: column;
flex: 1;/* make fill entire space left if any */
}
.box {
height: 400px;
}
.tall {
height: 800px;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');"><!-- background-image is to be send & set to the parent A -->
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
If you want to keep heights, then you need to mind the amounts of margins all together with eights of elements in each column :
example
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:824px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" >
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
The p tags, which has margins top and bottom by defaults, are pushing the boxes up. You have to use overflow: auto; on the parent div to prevent it from happening.
.project-grid .column .box {
// ...
overflow: auto;
}
Full working code:
.project-grid {
height: 1400px;
padding: 80px 20px;
}
.project-grid .column {
width: 33.33%;
margin-left: 10px;
flex-direction: column;
margin-top: -10px;
}
.project-grid .column:first-child {
margin-left: 0;
}
.project-grid .column .box {
margin-top: 10px;
background-color: blue;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
overflow: auto;
}
.project-grid .column .box.tall {
height: 800px;
}
.project-grid .column a .box>p {
font-family: $lato;
color: $white;
font-size: 24px;
}
.flex {
display: flex;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS