Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to keep my image caption grid floating correctly with different sized text content

Tags:

css

css-float

I have an issue here where if a caption is too long, if it extends beyond one line it causes the elements following to not float correctly. I would like to have it, so that no matter on the content of the caption, the following row adjusts to the space. I have seen another site achieve something very similar.

I can't work out what else I need. 

body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	float: left;
	display: block
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
  <div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

CSS Tricks say:

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats

Reading this, I set the container div.project-thumbnail, but no change:

.project-thumbnail {
  overflow: auto
}

jsFiddle

EDIT

As the comment suggests, setting a height to the caption div div.thumb would enable it to float correctly. A fixed height will cut off content that becomes too big for it. Adding overflow: auto to this div will just add a scrollbar to it, this is not what I am after.

EDIT

This site here has a similar system. Items with a width are floated, no row separator, but if the content within their div extends beyond a few lines, the bottom of the div will adjust, aligning the next row neatly.

like image 867
davvv Avatar asked Dec 03 '17 23:12

davvv

People also ask

How do I align text and image in the same line in CSS?

Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.

How do I put text and pictures side by side?

Align image and text side by side On line 12 I have added style to the container class. I have added width property and given 300px width and added the flex property and align items to center. By using these properties, the image and text will be aligned side by side.

3 Answers

updated, thanks to @user10089632 for comment

To get the layout you want using float, try adding the clear property to every 4th .column.

example

.column:nth-child(3n + 4) {
  clear: both;
}

This will target every 3rd .column, beginning from the 4th .column (you don't need to apply the rule to the first div in your example)

You can adjust nth-child(n) if you need to change your grid to 4 x 4 or something else.

You can apply this code to article instead, depending on the rest of your site.

fiddle

body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	float: left;
	display: block
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}

.column:nth-child(4) {
  clear: both;
}
  <div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>
like image 89
sol Avatar answered Oct 16 '22 09:10

sol

First solution

This is what you are looking for, you have to add just one rule to your css, 

.row article:nth-child(3n+1){
    clear: left;
}


.row article:nth-child(3n+1){
	clear: left;
}
body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	float: left;
	display: block
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

Second solution : inline block display

Fluid, scalable easy to grasp

I prefer this solution, using display:inline-block which is straightforward and works fine now for IE. The only downfall is the white spaces between the markup(which I've chosen to delete them here).

I've just taken liberty to modify your code so you can find what just the modifications.

body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	display: inline-block;
	vertical-align: top;
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>

Third solution: grid layout

Very cool powerful modern CSS feature, you can get some more info here

body {
	padding: 0;
	margin: 0 auto;
}



body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}

.constraint {
	/*! padding-right: 2%; */
	/*! padding-left: 2%; */
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}
.col-4 {
	/*! width: 33.33333333% */
}
.columns {
	padding-left: 25px;
	padding-right: 25px;	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
}
<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>
like image 2
user10089632 Avatar answered Oct 16 '22 10:10

user10089632

This all seems like a bit too much code.

I have simplified it using Flexbox (as shown below).

Here is what I did:

For .center I added a class called "center" to the div that contains the container of the grid. It basically centers your section.

For section The section is the container of all the grid elements. I added display, flex-direction, flex-wrap and width. You do not necessary need to declare all of them (except for display) since some of them are defaults that come with using display:flex. I encourage you to test it all out in your console.

For article You need to declare the width and margin here. I am declaring 4 columns. Here is an example of how to calculate with 2 columns:

Since my margin is at 1.66%, my total margin space is 6.64% How did I come up with that number? The first grid element has a margin to the right and to the left. The second grid element has a margin to the right and to the left. So, 1.66% X 4

I then substract 6.64 from 100, which gives me 93.36. I divide that in two because I have two columns. So every column width will be 46.68%. */

If you were to add padding, you would need to declare the following:

article { box-sizing:border-box; }

This will keep your columns from breaking.

CSS Tricks has a great tutorial on how to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:80%;
}
article {
  background: grey;
  width:21.68%;
  margin: 1.66%;
}

img {
  max-width:100%;
}
<div class="center">
    <section> 
        <!-- Project previews -->
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
        <article>
            <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image">
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        
    </section>
  </div>
like image 2
Michelle Cantin Avatar answered Oct 16 '22 10:10

Michelle Cantin
Sign in to Comment

Related questions

Add & Remove CSS classes with React
Flex item does not "float" after translated sibling
Selected Options disappear in a multiple drop-down select tag with scroll bar in HTML
Flexbox Grid System w/Margin Gutters
R Shiny Image without padding/ stretched across page using css
Change color when user has scrolled down enough and then back
Background pixelated
Bootstrap 4 SCSS overrides not working
Bootstrap 4 - Horizontally Align Inline Lists
Using *ngFor in CSS Grid Layout Undesirably Displaying Everything in One Column
select <li> that does not have <a>
Click anywhere to close side navbar javascript
Round border with gradient color
Possible to Design This Button with Angled Corners Using Only CSS and No Images
Background blend mode on PNG images
Applying transform:scale to just the background image
Can't get rid of white space at bottom of my mobile version of website
React Native: Flex for ScrollView doesn't work
CSS3 animation Slide div form right to left Onclick of button
Background gradient as two tone solid color - one color width in px

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!