Flexbox Media Object

Developer
David Klotz
Size
3,221 Kb
Views
6,072
  1. Flexbox Media Object Previews
  2. Flexbox Media Object HTML Codes
  3. Flexbox Media Object CSS Codes

How do I make an flexbox media object?

Media object pattern adapted from https://philipwalton.github.io/solved-by-flexbox/demos/media-object/.. What is a flexbox media object? How do you make a flexbox media object? This script and codes were developed by David Klotz on 23 January 2023, Monday.

Flexbox Media Object Previews
IQ Test

Flexbox Media Object - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Media Object</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="media-list"> <li class="media"> <div class="media-figure"> <img src="https://photos.smugmug.com/Public/i-82LCcPk/1/d888b3cf/O/600x450.jpg" /> </div> <div class="media-excerpt"> <div class="media-title"> <h3>Media Object</h3> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p> </div> </div> </li>	<li class="media media--circle"> <div class="media-figure"> <img src="https://photos.smugmug.com/Public/i-SM5NPcQ/1/4d503bc4/O/600x600.jpg" /> </div> <div class="media-excerpt"> <div class="media-title"> <h3>Media Object Title</h3> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p> </div> </div> </li>	<li class="media media--small"> <div class="media-figure"> <img src="https://photos.smugmug.com/Public/i-SM5NPcQ/1/4d503bc4/O/600x600.jpg" /> </div> <div class="media-excerpt"> <div class="media-title"> <h3>Media Object Title</h3> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p> </div> </div> </li>
</ul>
</body>
</html>

Flexbox Media Object - Script Codes CSS Codes

html, body { font-family: sans-serif;
}
*, *:before, *:after { box-sizing: border-box;
}
.media-list { padding: 0.5em; margin: 0;
}
.media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 1em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: left;
}
@media (min-width: 40.625em) { .media { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
}
.media img { width: 100%;
}
.media.media--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.media.media--reverse > .media-figure { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin: 0;
}
@media (min-width: 40.625em) { .media.media--reverse > .media-figure { margin: 0 0 0 1em; }
}
.media.media--small { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: top; -ms-flex-align: top; align-items: top;
}
@media (min-width: 40.625em) { .media.media--small { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
}
.media.media--small > .media-figure { margin-right: 0.5em; width: 60px; max-width: 60px;
}
.media.media--circle { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
@media (min-width: 60em) { .media.media--circle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}
.media.media--circle > .media-figure { width: auto; text-align: center; margin-right: 1em; margin-top: 0.71429em;
}
@media (min-width: 40.625em) { .media.media--circle > .media-figure { width: auto; margin-top: 0; }
}
.media.media--circle > .media-figure img { margin: 0 auto; border-radius: 100%; max-width: 60px;
}
@media (min-width: 40.625em) { .media.media--circle > .media-figure img { max-width: 150px; }
}
.media .media-figure { width: 100%; margin-bottom: 0.5em;
}
@media (min-width: 40.625em) { .media .media-figure { margin-right: 1em; width: 30%; }
}
.media .media-excerpt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 0;
}
.media .media-excerpt .media-title { margin: 0.5em 0 0.33333em;
}
@media (min-width: 40.625em) { .media .media-excerpt .media-title { margin-top: 0; }
}
.media .media-excerpt .entry-meta { font-size: 13px;
}
Flexbox Media Object - Script Codes
Flexbox Media Object - Script Codes
Home Page Home
Developer David Klotz
Username dkdesign
Uploaded January 23, 2023
Rating 3
Size 3,221 Kb
Views 6,072
Do you need developer help for Flexbox Media Object?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Klotz (dkdesign) Script Codes
Name
Bourbon refill accordion tabs
Flexbox Layout
Responsive Testimonial Slider v1.0
A Pen by David Klotz
Tout box hover content overlay
CSS Transitions Transforms Reveal v1.0
Tout with hover content
Basic Fullscreen Hero
Tout Pattern
My Starter Kit For Codepen
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!