I have a problem that I encountered while I was trying to coding a landing page.
Basically I have this two sections, expertises and contacts.
The problem is that the section contacts overlaps the section above it on small screens.
In the expertises section I have a container where I put a display: grid in order to align all the elements correctly.
Everything works fine on big screens though.
Do you have any idea about how could I fix this problem?
DEMO
HTML:
!<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="./css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--expertise-->
<section id="expertises">
.<div class="container">
<div class="expertises-head">
<h2>Di cosa mi occupo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise1">
<img src="./img/together.png">
<h3>Competenza 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise2">
<img src="./img/together.png">
<h3>Competenza 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise3">
<img src="./img/together.png">
<h3>Competenza 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise4">
<img src="./img/together.png">
<h3>Competenza 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise5">
<img src="./img/together.png">
<h3>Competenza 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="expertise6">
<img src="./img/together.png">
<h3>Competenza 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<!--END expertise-->
<!--contacts-->
<section id="contacts">
<div class="container">
<div class="contacts-head">
<h2>Contatti</h2>
</div>
<div class="contacts-form">
<form action="contattami.php" method="post">
<div class="form-group">
<label for="InputName">Nome e cognome</label>
<input type="text" name="nome" required="" placeholder="Nome e cognome" class="InputName">
</div>
<div class="form-group">
<label for="InputEmail">Indirizzo e-mail</label>
<input type="email" name="email" required="" placeholder="Indirizzo e-mail" class="InputEmail">
</div>
<div class="form-group">
<label for="InputSubject">Oggetto</label>
<input type="text" name="oggetto" required="" placeholder="Oggetto" class="InputSubject">
</div>
<div class="form-group">
<label for="InputMsg">Messaggio </label>
<textarea name="messaggio" rows="4" required="" placeholder="Messaggio" class="InputMsg"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" placeholder="Invia" class="Submit">
</div>
</form>
</div>
<div class="contact-others">
<ul>
<li>
<div class="contact-email">
<h3 class="text-uppercase">Indirizzo email <img src=".\img\mail.png"></h3>
<p>probootstrap#gmail.com</p>
</div>
</li>
<li>
<div class="contact-cellphone">
<h3 class="text-uppercase">Cellullare <img src=".\img\smartphone-call.png"></h3>
<p>+30 976 1382 9921</p>
</div>
</li>
<li>
<div class="contact-skype">
<h3 class="text-uppercase">Skype <img src=".\img\skype-logo.png"></h3>
<p>Maria.rosaria.ciullo</p>
</div>
</li>
<li>
<div class="contact-address">
<h3 class="text-uppercase">Indirizzo <img src=".\img\location.png"></h3>
<p>San Francisco, CA</p>
<p>4th Floor8 Lower</p>
<p>San Francisco street, M1 50F</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!--END contacts-->
</body>
</html>
CSS:
*, *::before, *::after {
box-sizing: border-box;
}
body{
font-family: 'Raleway', 'PT Sans', sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
background: #FFF;
}
img{
width: 100%
}
.container{
max-width: 1271px;
text-align: center;
margin: 0 auto;
padding: 0 3rem;
}
/* expertises */
#expertises{
width: 100%;
min-height: 100vh;
padding: 5em 0;
}
#expertises .container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
}
#expertises .expertises-head{
grid-column: 1/4;
grid-row: 1;
margin-bottom: 2vh;
}
#expertises img{
width: auto;
}
/* contacts */
#contacts{
width: 100%;
min-height: 100vh;
padding: 5em 0;
display: inline-block;
}
#contacts .container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
#contacts .contacts-head{
grid-column: 1/3;
grid-row: 1;
text-align: left;
}
#contacts .contacts-form{
grid-column: 1/3;
grid-row: 2;
text-align: left;
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7)
}
#contacts .contact-others{
grid-column: 3/3;
grid-row: 2;
text-align: left;
}
#contacts .contact-email, .contact-cellphone, .contact-address, .contacts-skype{
margin-bottom: 30px;
}
#contacts .text-uppercase{
font-size: 20px;
font-weight: bold;
}
#contacts ul{
list-style-type: none;
}
#contacts p{
line-height: 8px;
}
#contacts img{
width: auto;
}
This is the problem basically.
If you add a media query for width below 600px and change #contacts .contact-others class with the following it should work.
#contacts .contact-others{
grid-column: 1/3;
grid-row: 4;
text-align: left;
}
Related
I am currently learning css grid, a total noob. I am trying to create a project portfolio that shows 3
div per row when on a browser unless the screen has a width of 1000px or less it should be each one div per row, but when I set it grid-template-columns: 1fr in viewport, it overlaps the next section and the next section is hidden behind the divs. If anyone can help me out would be a great! Thanks in advance!
Below is the sample code:
html,
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
}
section {
height: 100%;
display: grid;
justify-content: center;
align-content: center;
text-align: center;
background-color: slateblue;
border: 1px solid black;
}
.projects {
grid-template-columns: auto auto auto;
grid-auto-rows: minmax(200px, auto);
justify-content: stretch;
align-content: stretch;
}
.header {
grid-column-start: 1;
grid-column-end: 4;
color: white;
justify-items: center;
align-items: center;
text-align: center;
}
.projectPanels {
position: relative;
text-align: center;
border: 1px solid green;
}
.img {
opacity: 1;
display: block;
position: absolute;
width: 100%;
height: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.textBoxOutline {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.projectPanels:hover .img {
opacity: 0.3;
}
.projectPanels:hover .textBoxOutline {
opacity: 1;
}
.textBox {
background-color: red;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.contact {
background-color: gray;
color: white;
}
#media screen and (max-width: 1000px) {
.projects {
grid-template-columns: 1fr;
}
.header {
grid-column-end: 1;
}
.img {
text-align: center;
}
}
<section class="projects" id="projects">
<div class="header">
<h1>PROJECTS</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl suscipit adipiscing bibendum est.
</p>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="projectPanels">
<img src="placeHolder.jpg" alt="PlaceHolder" class="img">
<div class="textBoxOutline">
<div class="textBox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div>
<h1>CONTACT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas diam in. Urna porttitor rhoncus dolor purus non. Sem integer vitae justo eget
magna fermentum iaculis. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Pharetra massa massa ultricies mi. Sed faucibus turpis in eu. Porttitor eget dolor morbi non arcu. Faucibus in ornare quam viverra orci sagittis eu volutpat.
Etiam tempor orci eu lobortis elementum nibh tellus molestie.</p>
Email: me#example.com
</div>
</section>
removing the height:100% on the .section style in the css in your fiddle seems to do the trick.
I created a list of cards using grid. The CSS:
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid > article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
The HTML:
<div id="app" class="container">
<div class="grid">
<article v-for="tool in tools">
<div class="title">
<h3>{{capitalizeFirstLetter(tool.name)}}</h3>
</div>
<div class="description">
{{tool.description}}
</div>
</article>
</div>
</div>
How do I keep up to 3 cards per row? I can't seem to understand how should I treat the grid so I will keep maximum 3 cards per row. For example I have 8 elements, then It will be:
card card card
card card card
card card
Change grid-template-columns property auto-fill to 3.
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
<div id="app" class="container">
<div class="grid">
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
</div>
</div>
I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
Using this I get below output
But, you know, I want to get same like "four columns" and a scroll bar for see more.
What's the problem.
Try it with this:
display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;
grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.
grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.
overflow-x: auto; auto will add the scrollbar
Horizontal scrolling containers the right way! Source
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.5 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
/* Hide scrollbar */
.hide-scroll {
overflow-y: hidden;
margin-bottom: calc(-.1 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<div class="full hide-scroll">
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>
try this:
.container{
display: grid;
grid-auto-columns: max-content;
grid-template-rows: 1fr;
width: 100%;
overflow-x: auto;
}
.child{
grid-row: 1;
grid-column: auto;
}
Your problem is that you are using 1fr unit. Instead put 25% (use calc to accommodate for any gaps). This will size your columns relative to available screen width. Of course you must apply 25% to grid-auto-columns also.
I faced a similar issue recently and none of the answers seemed to solve this the way I needed.
Here's my take on this:
body {
background-color: #e2e2e2;
}
h1,
h2 {
text-align: center;
}
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user that there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the elements and the scrollbar. */
--scrollbar-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scrollbar-padding);
margin: 30px 0;
}
.cols-5,
.desktop-cols-5 {
--visible-cols: 5;
}
.cols-3 {
--visible-cols: 3;
}
.hint-next {
--col-hint: 20px
}
#media (max-width: 1024px) {
.laptop-cols-3 {
--visible-cols: 3;
}
}
#media (max-width: 767px) {
.tablet-cols-2 {
--visible-cols: 2;
}
.tablet-hint-next {
--col-hint: 15px
}
}
#media (max-width: 425px) {
.mobile-cols-1 {
--visible-cols: 1;
}
.mobile-hint-next {
--col-hint: 10px
}
}
.card {
display: flex;
flex-flow: column nowrap;
background-color: lightblue;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
min-height: 250px;
overflow: hidden;
}
.card-title,
.card-desc {
flex: 1;
border-radius: 10px;
}
.card-title {
font-size: 1.2em;
font-weight: bold;
}
.card-desc {
padding: 20px;
background-color: orange;
}
<div class="main">
<h1>CSS Grid - Scrollable Horizontal Layout Example</h1>
<h2>4 Columns</h2>
<div class="cards">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h2>3 Columns - Hint Next</h2>
<div class="cards cols-3 hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h1>Responsive Example</h1>
<h2>Desktop - 5 Columns</h2>
<h2>Laptop - 3 Columns</h2>
<h2>Tablet - 2 Columns - Hint Next</h2>
<h2>Mobile - 1 Column - Hint Next</h2>
<div class="cards desktop-cols-5 laptop-cols-3 tablet-cols-2 tablet-hint-next mobile-cols-1 mobile-hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
The important bit being:
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the slider and the scrollbar. */
--scroller-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scroller-padding);
}
It can be very easily made responsive by adjusting the relevant CSS properties for each screen size. I have included a responsive example as well.
You can also check this as a codepen here: https://codepen.io/amyriounis/pen/VwyydGj
I think this medium article has the answer:
https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
Basically it comes down to the fact that the individual cards need to have a fixed width instead of a dynamic one, in order to force the browser to not squish them together.
I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.
I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.
What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.
Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.
Thanks in advance!
Code below
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
CSS
body {
margin: 0;
}
.container {
display: flex;
}
.card {
width: 30%;
margin: 0 1%
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px
}
It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.
.card {
display: flex;
flex-direction: column;
}
.text {
flex: 1 0 auto;
}
Demo
body {
margin: 0;
}
.container {
display: flex;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
margin: 0 1%;
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px;
flex: 1 0 auto;
}
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
I'm having two divs with the same height but different content. This content is dynamic made with a CMS. However I want to make the image and button to always be at the bottom of the div. How can I accomplish this? because I only get it to work if I use a fixed height, I never works with height: auto;
here is my HTML/CSS snippet
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
This is how it looks now:
How sould i do this?
You can do this by flex. These are the styles that I added
body {
margin:0;
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
body {
margin:0;
display: flex;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
display: flex;
flex-direction: column;
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
You can achieve this with flex and change some html
.box-wrapper {
display: flex;
align-items: stretch;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
align-items: start;
display: flex;
flex-direction: column;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
.mt-auto {
margin-top: auto;
}
.p-0 {
padding: 0 !important;
}
<div class="box-wrapper">
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto p-0">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
</div>