Responsive Grid List

Developer
Kristen Zirkler
Size
5,056 Kb
Views
4,048
  1. Responsive Grid List Previews
  2. Responsive Grid List HTML Codes
  3. Responsive Grid List CSS Codes
  4. Responsive Grid List JS Codes

How do I make an responsive grid list?

Responsive layout for open jobs grouped and with tabular meta data for each list item.. What is a responsive grid list? How do you make a responsive grid list? This script and codes were developed by Kristen Zirkler on 05 January 2023, Thursday.

Responsive Grid List Previews
IQ Test

Responsive Grid List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Grid List</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #efefef; margin: 0; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em;
}
a { text-decoration: none; color: #333;
}
h1 { font-size: 2.2em; margin: 0 0 .5em;
}
.main { background: #fff; border: 1px solid #ddd; max-width: 1000px; margin: 2em auto;
}
.button { display: inline-block; background: #0e7dc2; color: #fff; padding: 0 2em;
}
.button:hover { background: #0b5e92;
}
.button i { padding-left: .5em;
}
.slide { clear: left; padding: 80px; border-bottom: 4px solid #0e7dc2;
}
.slide p { margin: 0 0 1em;
}
.open-jobs h2 { font-size: 1.4em;
}
.open-jobs h2 span { padding-left: 20px;
}
.open-jobs h3 { font-size: 1.3em; margin-bottom: 1em; color: #0e7dc2;
}
.open-jobs h3 em { font-size: .7em; color: #333; display: block; float: right;
}
.open-jobs a { overflow: hidden; display: block; padding: .3em 0;
}
.open-jobs span { color: #333; display: block; width: 20%; display: inline-block; font-size: .9em; text-align: right; float: left;
}
.open-jobs span:first-child { width: 80%; font-size: 1.1em; text-align: left;
}
.open-jobs .jobs h3 { padding: 0 20px;
}
.open-jobs .jobs a { padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px;
}
.open-jobs .jobs a:hover { background: rgba(14, 125, 194, 0.2);
}
.open-jobs .groups { padding-top: 1.5em;
}
.open-jobs .groups div { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #ddd;
}
.open-jobs .filters { height: 56px;
}
.open-jobs .filters h2 { border-bottom: 1px solid #ddd; height: 55px; line-height: 55px;
}
.open-jobs .filters h2, .open-jobs .filters .dropdown { width: 25%; float: left;
}
.open-jobs .filters .button { height: 56px; line-height: 56px; padding: 0; text-align: center;
}
.dropdown { position: relative;
}
.dropdown .button i { padding-left: .5em; width: 10px; opacity: .5;
}
.dropdown .options { display: none; position: absolute; background: #0e7dc2; width: 100%; z-index: 2;
}
.dropdown .options a { color: #fff; border-bottom: 1px solid #0b5e92; padding: .7em .5em;
}
.dropdown .options a:hover { background: #0b5e92;
}
.dropdown.active .button { background: #0b5e92;
}
.dropdown.active .options { display: block;
}
/* Below Tablet ----------- */
@media only screen and (max-width: 768px) { .main { border: none; } .open-jobs span { width: 100%; text-align: left; float: none; } .open-jobs span:first-child { width: 100%; } .open-jobs .filters { height: auto; } .open-jobs .filters h2, .open-jobs .filters .dropdown { float: none; width: 100%; } .open-jobs .filters .dropdown a, .open-jobs .filters .options a { height: 36px; line-height: 36px; padding-top: 0; padding-bottom: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="main" class="main job-page"> <div class="open-jobs" id="job-list"> <div class="filters"> <h2><span>Open Jobs</span></h2> <div class="dropdown"> <a class="button" href="#">All Departments <i class="fa fa-sort-asc"></i></a> <div class="options" id="department-options"><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a></div> </div> <div class="dropdown"> <a class="button" href="#">All Categories <i class="fa fa-sort-asc"></i></a> <div class="options"><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a></div> </div> <div class="dropdown"> <a class="button" href="#">All Locations <i class="fa fa-sort-asc"></i></a> <div class="options" id="department-options"><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a><a href="#">Option 1</a></div> </div> </div> <div class="jobs groups"> <div> <h3><em>7 jobs</em>Phoenix</h3> <ul> <li><a href="#"> <span>Client Service Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator (Healthcare)</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Director UI/UX Design</span> <span>Creative</span> </a></li> </ul> </div> <div> <h3><em>11 jobs</em>Tempe</h3> <ul> <li><a href="#"> <span>Client Service Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator (Healthcare)</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Director UI/UX Design</span> <span>Creative</span> </a></li> <li><a href="#"> <span>Client Service Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator (Healthcare)</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Director UI/UX Design</span> <span>Creative</span> </a></li> </ul> </div> <div> <h3><em>3 jobs</em>Mesa</h3> <ul> <li><a href="#"> <span>Client Service Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator</span> <span>Sales & Marketing</span> </a></li> <li><a href="#"> <span>Community Marketing Coordinator (Healthcare)</span> <span>Sales & Marketing</span> </a></li> </ul> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Grid List - Script Codes CSS Codes

body { background: #efefef; margin: 0; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em;
}
a { text-decoration: none; color: #333;
}
h1 { font-size: 2.2em; margin: 0 0 .5em;
}
.main { background: #fff; border: 1px solid #ddd; max-width: 1000px; margin: 2em auto;
}
.button { display: inline-block; background: #0e7dc2; color: #fff; padding: 0 2em;
}
.button:hover { background: #0b5e92;
}
.button i { padding-left: .5em;
}
.slide { clear: left; padding: 80px; border-bottom: 4px solid #0e7dc2;
}
.slide p { margin: 0 0 1em;
}
.open-jobs h2 { font-size: 1.4em;
}
.open-jobs h2 span { padding-left: 20px;
}
.open-jobs h3 { font-size: 1.3em; margin-bottom: 1em; color: #0e7dc2;
}
.open-jobs h3 em { font-size: .7em; color: #333; display: block; float: right;
}
.open-jobs a { overflow: hidden; display: block; padding: .3em 0;
}
.open-jobs span { color: #333; display: block; width: 20%; display: inline-block; font-size: .9em; text-align: right; float: left;
}
.open-jobs span:first-child { width: 80%; font-size: 1.1em; text-align: left;
}
.open-jobs .jobs h3 { padding: 0 20px;
}
.open-jobs .jobs a { padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px;
}
.open-jobs .jobs a:hover { background: rgba(14, 125, 194, 0.2);
}
.open-jobs .groups { padding-top: 1.5em;
}
.open-jobs .groups div { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #ddd;
}
.open-jobs .filters { height: 56px;
}
.open-jobs .filters h2 { border-bottom: 1px solid #ddd; height: 55px; line-height: 55px;
}
.open-jobs .filters h2, .open-jobs .filters .dropdown { width: 25%; float: left;
}
.open-jobs .filters .button { height: 56px; line-height: 56px; padding: 0; text-align: center;
}
.dropdown { position: relative;
}
.dropdown .button i { padding-left: .5em; width: 10px; opacity: .5;
}
.dropdown .options { display: none; position: absolute; background: #0e7dc2; width: 100%; z-index: 2;
}
.dropdown .options a { color: #fff; border-bottom: 1px solid #0b5e92; padding: .7em .5em;
}
.dropdown .options a:hover { background: #0b5e92;
}
.dropdown.active .button { background: #0b5e92;
}
.dropdown.active .options { display: block;
}
/* Below Tablet ----------- */
@media only screen and (max-width: 768px) { .main { border: none; } .open-jobs span { width: 100%; text-align: left; float: none; } .open-jobs span:first-child { width: 100%; } .open-jobs .filters { height: auto; } .open-jobs .filters h2, .open-jobs .filters .dropdown { float: none; width: 100%; } .open-jobs .filters .dropdown a, .open-jobs .filters .options a { height: 36px; line-height: 36px; padding-top: 0; padding-bottom: 0; }
}

Responsive Grid List - Script Codes JS Codes

$('.filters a').click(function() { $('.filters a').removeClass('active'); $(this).addClass('active');
});
$('.dropdown .button').click(function() { if ($(this).parent().hasClass('active')) { $('.dropdown').removeClass('active'); } else { $('.dropdown .button i').removeClass('fa-times').addClass('fa-sort-asc'); $('.dropdown').removeClass('active'); $(this).parent().toggleClass('active'); } $(this).find('i').toggleClass('fa-sort-asc').toggleClass('fa-times');
});
Responsive Grid List - Script Codes
Responsive Grid List - Script Codes
Home Page Home
Developer Kristen Zirkler
Username kristenzirkler
Uploaded January 05, 2023
Rating 3
Size 5,056 Kb
Views 4,048
Do you need developer help for Responsive Grid List?

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!

Kristen Zirkler (kristenzirkler) Script Codes
Name
Simple - Blurred BG
Email Marketing Mock
The Characters of Wes Anderson
Blog Concept - Large photos
Company Profile - Jobing.com Mock
CSS Loader
Product - Flipping Cards
Blog Concept - Video
Bar loader with minimal HTML
CSS Loader SVG Animate Path - Jobing.com
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!