Responsive gallery
How do I make an responsive gallery?
Just mucking about. Different column numbers depending on screen size. What is a responsive gallery? How do you make a responsive gallery? This script and codes were developed by Ali on 07 August 2022, Sunday.
Responsive gallery Previews
Responsive gallery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responsive gallery</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> Responsive Gallery
</header>
<div class="container">
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/1"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/2"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/3"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/4"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/5"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/6"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div> <div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/7"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/8"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/9"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
<div class="gallery-item">
<img src="http://lorempixel.com/400/200/sports/10"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales bibendum purus, eget eleifend urna tristique non. Aenean in diam leo, et hendrerit urna.</p>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Responsive gallery - Script Codes CSS Codes
img { width: 100%;
}
p { padding: 0 10px;
}
header { padding: 10px; text-align: center; font-weight: bold; background: #c1c1c1;
}
.container { width: 100%; margin: 20px 1% 20px 0;
}
.gallery-item { float: left; margin: 0 0 10px 1%; background: #e1e1e1; box-sizing: border-box;
}
/*one column*/
@media screen and (min-width: 20em) { .gallery-item { width: 98%; }
}
/*two column*/
@media screen and (min-width: 30em) { .gallery-item { width: 48%; }
}
/*three column*/
@media screen and (min-width: 48em) { .gallery-item { width: 32%; }
}
/*four column*/
@media screen and (min-width: 75em) { .gallery-item { width: 23.8%; }
}
/*five column*/
@media screen and (min-width: 100em) { .gallery-item { width: 18.8%; }
}
| Developer | Ali |
| Username | alistairtweedie |
| Uploaded | August 07, 2022 |
| Rating | 3.5 |
| Size | 2,010 Kb |
| Views | 97,152 |
Do you need developer help for Responsive gallery?
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!
Ali (alistairtweedie) Script Codes
| Name | Size |
| Twitter buttons without the iframe | 2,827 Kb |
| Mobile first social buttons with no iframe | 3,158 Kb |
| A Pen by Ali | 4,821 Kb |
| Animated svg - Pintsize logo | 3,985 Kb |
| Cookie Fun | 2,869 Kb |
| Off canvas slider concept | 2,696 Kb |
| Colors | 4,459 Kb |
| Sweet Ass Buttons | 2,154 Kb |
| The pursuit of tidy code | 2,437 Kb |
| Social buttons | 1,870 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Custom Select Element | Agrayson | 3,616 Kb |
| Box-sizing | Elad2412 | 1,572 Kb |
| Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| Fluid Layout with Float | Jxqr97 | 1,785 Kb |
| A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| Comment Jquery | SquishyAndroid | 2,421 Kb |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!