I've recently discovered a neat way to do a masonry layout using columns, as found here: http://w3bits.com/css-masonry/. I've expanded on this layout by adding an overlay with text to each item upon hover. This works pretty well except for 2 problems:
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The transitions do not work; the hover effect displays and hides abruptly.
Some explanations regarding my code:
I've added margin: 0; border:0; padding:0 to the entire document in an attempt to prevent problems just like this one, to no avail. .item has margin: 0 0 20px to provide vertical spacing between each item.
Because .item-overlay requires position:absolute to work, and position:absolute requires the parent element to be positioned, I've added position:relative to .item. This doesn't affect anything beyond allowing the overlay to show up correctly, as far as I can tell.
.item-overlay uses display:flex to vertically and horizontally centralise its content, but this shouldn't affect the layout.
Could someone help me figure out what's wrong with the code? JSFiddle: https://jsfiddle.net/nattanyz/sfn47me9/1/
Use vertical-align: top on the img and transition opacity instead of display
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width: 1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display: block;
margin: 0 0 20px;
border: 0;
width: 100%;
position: relative;
}
.item-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(51, 51, 51, 0.6);
color: white;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(51, 51, 51, 0.6);
transition: opacity 300ms ease;
}
.item:hover .item-overlay {
opacity: 1;
}
.project-img {
width: 100%;
margin: 0;
border: 0;
padding: 0;
vertical-align: top;
}
.project-name {
font-weight: bold;
}
.project-category {
font-size: 0.75em;
text-transform: uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The problem is on the image itself, it has height smaller than the container. Try to put some background-color on the container, you will see that the overlay height is equal with it's parent.
The transitions do not work; the hover effect displays and hides abruptly.
You cannot implements transition on the css display, other alternative would be using opacity. I modified your code, please try.
html {
box-sizing:border-box;
}
*, *:before, *:after {
box-sizing:inherit;
}
body {
background-color:honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width:1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display:block;
margin: 0 0 20px;
border:0;
width:100%;
position:relative;
background-color: black;
}
.item-overlay {
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-color: rgba(51,51,51,0.6);
color:white;
opacity:0;
transition:300ms ease opacity;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.item:hover .item-overlay {
opacity: 1;
background-color: rgba(51,51,51,0.6);
}
.project-img {
width:100%;
margin:0;
border:0;
padding:0;
}
.project-name {
font-weight:bold;
}
.project-category {
font-size:0.75em;
text-transform:uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>
Related
Whenever I check the responsiveness and check it on the small screen my one div starts overlaying another div. I have tried the ```position : relative and overflow: hidden as well but it makes no sense call you please tell me what I have to do to stop it from being overlaying another div
my HTML code is :
<div class="container-grid">
<div class="grid_upper">
<h1 class="grid_Heading">My recent projects</h1>
<div class="grid_para">
Ask me a Question if you are unable to solve it.
</div>
</div>
<div class="cardContainer1">
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1074239826-170667a.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card </h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1272685152-612x612.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./photo-1473090826765-d54ac2fdc1eb.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-4">
<div class="card h-200">
<img
src="./creative-book-cover-design-vintage-260nw-1115305040.webp"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm-8" style="background-color: white;">
<div class="card card2 h-200" >
<img style="width: 100%;"
src="./wide-view-image-young-woman-paddling-sup-board-calm-morning-sea-water-rear-view_254268-2063.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer laster">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2_laster">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text" style="color: black;"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Approach">
<div class="app_head">
<h1 class="main_approach_Heading">My approach</h1>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no1">1</h1>
<div class="card-body">
<h5 class="card-title">We will sit and talk drinking coffee</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no2">2</h1>
<div class="card-body">
<h5 class="card-title">We will sketch some ugly Frameworks</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer approach_footer">
<div class="app_circle"> </div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no3">3</h1>
<div class="card-body">
<h5 class="card-title">You will pay alot for my services</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the CSS code is :
.grid_upper {
display: flex;
flex-direction: column;
width: 67%;
margin: auto;
}
.grid_Heading {
font-size: clamp(2em, 2.5vw, 7em);
padding: 0.5em 0.21em 0em 0em;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.grid_para {
color: white;
}
.container-grid {
display: flex;
position: relative;
height: 160vh;
overflow: visible;
flex-wrap: wrap;
background-color: #3e4245;
}
.cardContainer1 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.cardContainer2 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.card {
background-color: #252728;
border: none;
border-radius: 20px;
height: 100%;
}
.card2 {
background-color: white;
}
.card2 .card-title {
color: black;
}
.card2 .card-text {
color: grey;
}
.card-title {
color: white;
}
.card-text {
color: rgba(255, 255, 255, 0.522);
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255, 255, 255, 0.522);
background-color: #252728;
/* background-color: red; */
margin: none;
border: none;
}
.card_text_1 {
color: rgba(255, 255, 0, 0.659);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
.shortImg {
height: 40px;
width: 40px;
border-radius: 50%;
}
.footerNo2 {
display: flex;
align-items: flex-start;
justify-content: flex-start;
/* flex-direction: column; */
padding: 1em 1em;
/* background-color: aqua; */
}
.footerNo2_laster {
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: white;
}
.FooterInsideContainer {
display: flex;
flex-direction: column;
padding: 0em 1em;
}
.laster {
background-color: white;
}
.laster .card_text_1 {
color: skyblue;
}
.Approach {
position: relative;
/* overflow: hidden; */
height: 100vh;
width: 100%;
margin-top: 10em;
}
.app_head {
padding: 7em 5em;
display: flex;
font-weight: bold;
/* background-color: red; */
}
.main_approach_Heading {
font-size: clamp(1.5rem, 10.5vw, 4rem);
font-family: "Roboto", sans-serif;
margin: auto;
text-align: center;
}
.pic_char {
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* margin-top: 200px; */
text-align: center;
font-weight: bold;
text-transform: uppercase;
/* font-family: 'Times New Roman', Times, serif; */
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
.no1 {
background-image: url("./istockphoto-1288917639-170667a.jpg");
font-family: "Montserrat Alternates", sans-serif;
font-size: 13em;
}
.no2 {
background-image: url("./polygonal-square-background-black-blue-purple-vector-21357114.jpg");
/* font-family: 'Anton', sans-serif; */
font-size: 12em;
}
.no3 {
background-image: url("./android-marshmallow-6-hd-orange-yellow-and-gray-blocks-illustrarion-wallpaper-preview.jpg");
font-size: 12em;
}
.Approach .card {
display: flex;
background-color: white;
color: black;
/* width: 50%; */
}
.Approach .card-body {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
padding: 0em 4em;
/* background-color: pink; */
}
.Approach .card-title {
color: black;
font-weight: 700;
font-size: 1.4em;
font-feature-settings: "vrt2";
}
.Approach .card-text {
color: grey;
text-align: center;
}
.approach_footer {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: grey;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
.app_circle{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
I have a bootstrap 4 header and I'm using flex in it for some custom layout.
Here is the html:
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="">
</a>
<div class="box">
<div class="title">TITLE HERE</div>
<div class="flex-inline-container">
<div class="icon"><img src="icon1.png" alt="" /></div>
<div class="icon"><img src="icon2.png" alt="" /></div>
<div class="icon"><img src="icon3.png" alt="" /></div>
<div class="icon"><img src="icon4.png" alt="" /></div>
<div class="icon"><img src="icon5.png" alt="" /></div>
</div>
</div>
</div>
</nav>
And the CSS:
.box {
display: flex;
border-right: 2px solid #bfbfbf;
width: min-content;
flex-direction: column;
}
.box .flex-inline-container {
display: inline-flex;
}
.box .icon {
margin-right: 20px;
cursor: pointer;
}
.box .title {
position: relative;
left: 7px;
font-size: 1.40rem;
font-weight:300;
color: #727272 !important;
}
My issue is that the "flex-inline-container" div is going all the way to the right and I need it to be on the left.
How can I make it go to the left?
The .container-fluid class of bootstrap has a Justify-content:space-between property. Which distributes items evenly (The first item is flush with the start,
the last is flush with the end).
In your case the <a class="navbar-brand"><a> will be moved to first and elements inside <div class="box"></div> moved to last.
If you want to override Justify-content property of .Container-fluid and move to left, Then add a .justify-content-start along with .Container-fluid.
.box {
display: flex;
border-right: 2px solid #bfbfbf;
width: min-content;
flex-direction: column;
}
.box .flex-inline-container {
display: inline-flex;
}
.box .icon {
margin-right: 20px;
cursor: pointer;
}
.box .title {
position: relative;
left: 7px;
font-size: 1.40rem;
font-weight:300;
color: #727272 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar">
<div class="container-fluid flex-row-reverse">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="">
</a>
<div class="box">
<div class="title">TITLE HERE</div>
<div class="flex-inline-container">
<div class="icon"><img src="icon1.png" alt="" /></div>
<div class="icon"><img src="icon2.png" alt="" /></div>
<div class="icon"><img src="icon3.png" alt="" /></div>
<div class="icon"><img src="icon4.png" alt="" /></div>
<div class="icon"><img src="icon5.png" alt="" /></div>
</div>
</div>
</div>
</nav>
I am trying to display images in a single line horizontal with scroll but I can't figure how to I would appreciate it if anyone could help me.
CSS
.img {
max-width: 400px;
position: relative;
}
.animal {
float: left;
background-color: #fff;
}
.image-grid{
flex-wrap: wrap;
width: 1400px;
margin: 0 auto;
}
.pet-photo {
padding: 10px;
display: block;
box-sizing: border-box;
flex-basis: 100%;
float: left;
padding: 20px;
width: 200px;
height: 300px;
display: block;
}
js
<div class ="image-grid">
<div class="animal">
<img class="pet-photo " src="${pet.photo}" >
<div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
<div id="mydiv">
<h2 class="pet-name">${pet.name}
<h1 class="species">${pet.species}
</div>
<div></div></div>
</div>
</div>
That's all thank you for reading :) really appreciate it.
solution is display: flex; with flex-wrap: nowrap;
.container-items {
overflow: auto;
width: 100%;
}
.items {
display: flex;
flex-wrap: nowrap;
}
.items .item {
min-width: 150px;
text-align: center;
padding: 5px;
}
.items .item h2,
.items .item h3 {
margin: 0;
}
.items .item img {
width: 100%;
}
<div class ="container-items">
<div class ="items">
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3>here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
</div>
</div>
I have this HTML and CSS:
.container {
width: 100%;
}
.group {
display: flex;
justify-content: space-between;
min-width: 214px;
background: #eee;
}
.abbr {
/* some styling */
}
.name {
/* some styling */
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div>
Now, if I use just min-width, the whole div stretches as the entire width of the container. If I just use width, it won't expand if the name is longer than Mark Smith (rather it will go to the next line).
This is what I wanted to achieve:
How do I achieve this in flexbox?
What you're looking for is to apply width: fit-content to .group.
Then you can adjust the offset between the abbreviation and name with min-width on the .abbr.
This can be seen in the following:
.group {
display: flex;
width: fit-content;
background: #eee;
margin: 10px 0;
}
.group > div {
margin: 0 10px;
}
.abbr {
min-width: 50px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">A Really Really Long Name</p>
</div>
</div>
</div>
I use inline-block on .container so that it won't take up the whole line.
.container {
display: inline-block;
}
.group {
display: flex;
background: #eee;
}
.abbr {
padding: 0 7px;
}
.name {
padding: 0 7px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div><br/><br/>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div>
<p class="name">Loooooooooooooooong Name</p>
</div>
</div>
</div>
Another solution is to use a third element that consume all the remaining space and set the background color on the text content only:
.container {
margin: 0 0 5px 0;
}
.group {
display: flex;
}
.abbr {
padding: 0 7px;
background: #eee;
}
.name {
padding: 0 7px;
background: #eee;
flex: 0 0 auto;
}
.blank-space{
flex: 1 1 auto;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div class="name">
<p>Mark Smith</p>
</div>
<div class="blank-space"></div>
</div>
</div>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div class="name">
<p>Loooooooooooooooong Name</p>
</div>
<div class="blank-space"></div>
</div>
</div>
I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them.
Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.
Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:640px;
height:100%;
}
.image {
position: relative;
width: auto; /* for IE 6 */
max-height: 640px;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
bottom:-15px;
left: 0;
width: 600px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>
Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.
body{
background-color:darkgrey;
}
.row{
left: 50%;
}
#media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
margin-right: 20px;height:auto; margin-bottom: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-word; /* non standard for webkit */
font-size: 2vw;
max-width: 100%;
max-height: 100%;
color:white;
}
<body>
<div class="row">
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>
Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
}
.wrapper {
overflow: hidden;
margin: auto;
padding: 0.75rem;
background-color: #eee;
}
div > div {
padding: 0.75rem 1.5rem;
margin: 0.5rem;
background-color: #ccc;
float:left;
}
div:nth-child( 4n ){
clear: left;
}
.note {
width: 100%;
padding: 1rem;
background-color: #000;
color: #eee;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#media( max-width: 1025px ){
div:nth-child( 2n + 3 ){
clear: left;
}
div:nth-child( 4n ){
clear: none;
}
.note {
background-color: rgba( 0, 0, 0, 0.6 );
}
}
<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
<div>div1</div> <div>div2</div> <div>div3</div>
<div>div4</div> <div>div5</div> <div>div6</div>
</div>