Responsive Grid Proportion

Developer
Renato Ribeiro
Size
3,608 Kb
Views
18,216
  1. Responsive Grid Proportion Previews
  2. Responsive Grid Proportion HTML Codes
  3. Responsive Grid Proportion CSS Codes
  4. Responsive Grid Proportion JS Codes

How do I make an responsive grid proportion?

Keeping the proportion of elements with fluid height.. What is a responsive grid proportion? How do you make a responsive grid proportion? This script and codes were developed by Renato Ribeiro on 17 November 2022, Thursday.

Responsive Grid Proportion Previews
IQ Test

Responsive Grid Proportion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Grid Proportion</title> <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! */ /* COMPONENT */
.grid { font-size: 0; /* inline white-space */
}
.grid > div { width: 20%; position: relative; display: inline-block; font-size: 14px; /* normalize font-size */
}
@media (max-width: 1050px) { .grid > div { width: 25%; }
}
@media (max-width: 800px) { .grid > div { width: 33.33%; }
}
@media (max-width: 550px) { .grid > div { width: 50%; }
}
@media (max-width: 300px) { .grid > div { width: 100%; }
}
.grid > div > img.square { width: 100%;
}
.grid > div > .content { position: absolute; height: 100%; width: 100%; background: white; color: black; top: 0; left: 0; padding: 20px;
}
/* EXAMPLE STYLES */
body, html { height: 100%; padding: 0; margin: 0; font-smoothing: antialiased; background: #ecf0f1;
}
body { font-family: 'Roboto';
}
*, *:before, *:after { box-sizing: border-box;
}
h1 { text-align: center; color: #2c3e50; font-size: 50px; line-height: 0.8em;
}
h1 small { font-size: 0.5em; color: #e74c3c;
}
@media (max-width: 500px) { h1 { font-size: 35px; }
}
@media (max-width: 300px) { h1 { font-size: 25px; }
}
.grid > div > .content { border: 5px solid #ecf0f1; background: white; color: #888888;
}
.top { width: 100%; height: 4px; background: #2ecc71; position: relative;
}
.top:before,
.top:after { content: ''; display: block; width: 33.33%; height: 4px; position: absolute; top: 0;
}
.top:before { left: 0; background: #9b59b6;
}
.top:after { right: 0; background: #e67e22;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="top"></div>
<h1> Responsive Grid <br /> <small>Keeping the proportion of elements</small>
</h1>
<div class="grid"> <div> <img class="square" src="http://placehold.it/1x1"/> <div class="content"> <h2>Content</h2> <p>Lorem ipsum dolor sit amet</p> </div> </div> <div> <img class="square" src="http://placehold.it/1x1"/> <div class="content"> <h2>Content</h2> <p>Lorem ipsum dolor sit amet</p> </div> </div> <div> <img class="square" src="http://placehold.it/1x1"/> <div class="content"> <h2>Content</h2> <p>Lorem ipsum dolor sit amet</p> </div> </div> <div> <img class="square" src="http://placehold.it/1x1"/> <div class="content"> <h2>Content</h2> <p>Lorem ipsum dolor sit amet</p> </div> </div> <div> <img class="square" src="http://placehold.it/1x1"/> <div class="content"> <h2>Content</h2> <p>Lorem ipsum dolor sit amet</p> </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 Proportion - Script Codes CSS Codes

/* COMPONENT */
.grid { font-size: 0; /* inline white-space */
}
.grid > div { width: 20%; position: relative; display: inline-block; font-size: 14px; /* normalize font-size */
}
@media (max-width: 1050px) { .grid > div { width: 25%; }
}
@media (max-width: 800px) { .grid > div { width: 33.33%; }
}
@media (max-width: 550px) { .grid > div { width: 50%; }
}
@media (max-width: 300px) { .grid > div { width: 100%; }
}
.grid > div > img.square { width: 100%;
}
.grid > div > .content { position: absolute; height: 100%; width: 100%; background: white; color: black; top: 0; left: 0; padding: 20px;
}
/* EXAMPLE STYLES */
body, html { height: 100%; padding: 0; margin: 0; font-smoothing: antialiased; background: #ecf0f1;
}
body { font-family: 'Roboto';
}
*, *:before, *:after { box-sizing: border-box;
}
h1 { text-align: center; color: #2c3e50; font-size: 50px; line-height: 0.8em;
}
h1 small { font-size: 0.5em; color: #e74c3c;
}
@media (max-width: 500px) { h1 { font-size: 35px; }
}
@media (max-width: 300px) { h1 { font-size: 25px; }
}
.grid > div > .content { border: 5px solid #ecf0f1; background: white; color: #888888;
}
.top { width: 100%; height: 4px; background: #2ecc71; position: relative;
}
.top:before,
.top:after { content: ''; display: block; width: 33.33%; height: 4px; position: absolute; top: 0;
}
.top:before { left: 0; background: #9b59b6;
}
.top:after { right: 0; background: #e67e22;
}

Responsive Grid Proportion - Script Codes JS Codes

/**
Renato Ribeiro <[email protected]>
http://rena.to/
**/
Responsive Grid Proportion - Script Codes
Responsive Grid Proportion - Script Codes
Home Page Home
Developer Renato Ribeiro
Username renatorib
Uploaded November 17, 2022
Rating 3
Size 3,608 Kb
Views 18,216
Do you need developer help for Responsive Grid Proportion?

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!

Renato Ribeiro (renatorib) Script Codes
Name
Animate.css Exemplo 2
Animate.css Exemplo 1
Three Bullets Spinning
Flip Cards jAnimate
A Pen by Renato Ribeiro
Slide Actions List
Tinder
IOS Toggle Checkbox
PureCSS Tabs
Orbit
Create amazing sales emails 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!