responsive pure css - Brave Search

Responsive layout in pure css

stackoverflow.com › questions › 50888759 › responsive-layout-in-pure-css

I think you need to add a position to the wrapper, try adding position: absolute; to the wrapper class.

https://jsfiddle.net/kgwfytuj/2/

Answer from Jaziel_Inc on Stack Overflow

pure-css.github.io

Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft. Pure is responsive out of the box, so elements look great on all screen sizes.

Pure's default responsive grids comes with the following class names and media query breakpoints. You may have noticed that we use em for our default CSS Media Query widths instead of px. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom ...

Here's the default responsive breakpoints included in grids-responsive.css: Here's an example of what you'd be able to do. Try resizing your screen to see how the grid responds. ... This site is built with ❤️ using Pure v3.0.0 All code on this site is licensed under the Yahoo BSD License ...

Quickstart your next web project with these example layouts.

tutorialspoint.com › purecss › purecss_responsive_design.htm

Pure.CSS - Responsive Design

In the following example, we're going to create a responsive grid with a row having four columns. The columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens. This is done by adding .pure-u-1 class for small screens, .pure-u-md-1-2 for mediumsized screens, and .pure-u-lg-1-4 for large screens.

Videos

5 simple tips to making responsive layouts the easy way - YouTube

August 19, 2021

How To Make Your Website Responsive, with Media Queries (CSS) - ...

January 26, 2025

HTML & CSS for Absolute Beginners: Responsive images - YouTube

January 10, 2025

How to Create A Pure CSS Responsive Navbar - YouTube

Pure CSS Responsive Sidebar Menu | Responsive Navigation Bar Tutorial ...

Pure CSS Responsive Navigation Menu Tutorial | No ...

December 30, 2019

github.com › pure-css › pure

GitHub - pure-css/pure: A set of small, responsive CSS modules that you can use in every web project. · GitHub

A set of small, responsive CSS modules that you can use in every web project. https://purecss.io/

Starred by 23.8K users

Forked by 2.4K users

Languages JavaScript 48.8% | HTML 33.8% | CSS 17.4%

stackoverflow.com › questions › 50888759 › responsive-layout-in-pure-css

html - Responsive layout in pure css - Stack Overflow

I think you need to add a position to the wrapper, try adding position: absolute; to the wrapper class.

https://jsfiddle.net/kgwfytuj/2/

I spent a couple of hours preparing final solution, with some help of Jaziel_Inc (on how to manage the margins and paddings, you can see his answer below my question- Thanks Jaziel!). I just thought it would be helpful to other folks to post the final version of that fully responsive layout in case anyone would search for it in the future.

The layout has a central element- wrapper. 7 elements in it - those are paragraphs with sample text. It had to be adjusted to different resolutions maintaining the margin of 16px between the elements and between the elements & the wrapper. Each paragraph is set to minimal width of 300px. Central element is set to maximal width of 1500px. I post a link to github https://github.com/realgs/responsiveSimpleLayout.git

Of course I'd appreciate any feedback!

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---------- Actual code comes below ---------- */

body {
	background-color: lightgray;
}

.wrapper {
	width: 100%;
	background-color: #feecec;
	padding: 16px 0;
	font-size: 0;
}

.pink {
	min-width: 300px; 
	padding: 5px;
	margin: 16px;
	font-family: arial; 
	font-size: 16px;
	color: #111;
	border-radius: 5px;
	border: 1px solid #cf894c;
	background-color: #fdeddc;
}

.blue {
	min-width: 300px; 
 	padding: 5px;
	margin: 16px;
	font-family: arial; 
	font-size: 16px;
	color: #111;
	border-radius: 5px;
	border: 1px solid #3f79b7;
 	background-color: #e8f6ff;
}

.up{
  margin: 0 16px 16px 16px;
}

.down{
  margin: 16px 16px 0 16px;
}

@media only screen and (min-width: 600px) {

	.wrapper {
		width: 100%;
		margin: 0 auto;
	}
}

@media only screen and (min-width: 900px) {

	.wrapper {
		width: 100%;
		margin: 0 auto;
		padding: 8px 0;
	}

	.pink {
	    display: inline-block;    
	    position: relative; 
		margin: 8px 8px 8px 16px;
		width: -webkit-calc(50% - 36px);
	    width: calc(50% - 36px);
		max-width: 564px;
	}

	.blue {
	    display: inline-block;    
	    position: relative;
		margin: 8px 16px 8px 8px;
	    width: -webkit-calc(50% - 36px);
		max-width: 564px;
	}

	div #seven {
		width: 100%;
		margin: 8px 16px 8px 16px;
		max-width: calc( 100% - 44px);
	}
}

@media only screen and (min-width: 1200px) {

	.pink {
		margin: 8px 8px 8px 8px;
		width: -webkit-calc(33.33333% - 33.33px);
	    width: calc(33.33333% - 33.33px);
		max-width: 478px;
	}

	.blue {
		margin: 8px 8px 8px 8px;
	    width: -webkit-calc(33.33333% - 33.33px);
		max-width: 478px;
	}

	div #seven {
		width: 100%;
		margin: 8px 16px 8px 16px;
		max-width: calc( 100% - 44px);
	}

	div #one, #four {
		margin: 8px 8px 8px 16px;
	}
}

@media only screen and (min-width: 1500px) {
	
	.wrapper {
		width: 1500px;
	}

	div #one, #two, #three, #four {
		margin: 8px 8px 8px 8px;
		width: 343px;
	}

	div #seven, #six, #five {
		margin: 8px 8px 8px 8px;
		width: 466.66px;
	}

	div #one, #five {
		margin: 8px 8px 8px 16px;
	}

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="wrapper">
			<div id="one" class="pink up">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="two" class="blue">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="three" class="pink">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="four" class="blue">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="five" class="pink">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="six" class="blue">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div id="seven" class="pink down">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
		</div>
	</body>
</html>

coderepublics.com › Purecss › Purecss-tutorial.php

Pure CSS Tutorial - Learn to Create responsive web page design

July 9, 2021 - Pure CSS helps in creating beautiful and responsive websites quickly. It occupies very less space having a size comparable to 4 KB (minified + gzipped). It is like bootstrap but on the lighter side as it only uses the real CSS and not javascript.

medium.com › @brianmayrose › pure-css-media-queries-are-simplifying-responsive-web-design-beginner-tutorial-f9bcf86b8e76

Pure CSS Media Queries Are Simplifying Responsive Web Design — Beginner Tutorial | by Brian Mayrose | Medium

November 15, 2018 - Pure CSS Media Queries Are Simplifying Responsive Web Design — Beginner Tutorial Check out a live working example of pure CSS media queries in action here. We will go over two ways of implementing …

geeksforgeeks.org › css › what-to-understand-pure-css-responsive-design

What to understand Pure CSS Responsive Design ? - GeeksforGeeks

October 31, 2021 - In simple words, responsive designs are designed to be accessed across all devices regardless of the size of the device screen. Some screen sizes or device widths that should be kept in mind while creating responsive websites are desktops, laptops, mobile phones, and tablets. Responsive layout is the built-in characteristic of Pure.CSS.

blog.openreplay.com › responsive-mobile-layouts-with-purecss

Responsive mobile layouts made easy with Pure.CSS

The Pure.css grid modules form evenly spaced boxes on a page, resembling a grid layout. This is achieved by dividing the page into four columns, where each box occupies a quarter of the total width. To ensure better responsiveness when the screen size is reduced, it’s recommended to use a large grid class (pure-u-lg-) for larger screens.

Find elsewhere

Google Bing Mojeek

blog.logrocket.com › home › creating responsive mobile layouts with pure.css

Creating responsive mobile layouts with Pure.css - LogRocket Blog

June 4, 2024 - It is designed to be incredibly small, and the entire set of modules does not exceed three and a half kilobytes. Pure.css was also designed with mobile layouts in mind, making it responsive and modular — enabling developers to include the ...

w3resource.com › pure › grid.php

A tutorial on Responsive and unresponsive Grids by Pure CSS - w3resource

August 19, 2022 - Besides some styles same as pure-g, for images within the responsive grid, width is set to 100% with .pure-g-r img {max-width: 100%;} and several breakpoints are set for different screen widths by using media queries(@media). First breakpoint is set at min-width:980px. It has three CSS classes, pure-visible-phone, pure-visible-tablet and pure-visible-desktop.

Pico CSS • Minimal CSS Framework for semantic HTML

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà!

Author Lucas Larroche

Repository https://github.com/picocss/pico

arnaudleray.github.io › pocketgrid

PocketGrid - Pure CSS responsive and semantic grid system

September 12, 2014 - Define columns in your CSS · Very light: < 1 kb! Compatible with Twitter Bootstrap · Most browsers supported (IE6+) No need for jQuery or LESS/SASS ·

sitepoint.com › blog › bootstrap › introducing pure.css – a lightweight responsive framework

Introducing Pure.css – A Lightweight Responsive Framework — SitePoint

November 7, 2024 - Pure.css is a lightweight responsive framework that is made up of CSS modules, all of which together weigh less than 4.0KB if served minified and gzip’d.

geeksforgeeks.org › css › pure-css-responsive-grids

Pure CSS Responsive Grids - GeeksforGeeks

July 23, 2025 - Responsive design's function is to display the contents of the website automatically across all screen resolutions and sizes, and prevents unnecessary resizing in the websites. Pure CSS Grid classes: There are two types of classes in Pure grid.

github.com › Ivy-Walobwa › responsive-pure-css-menu

GitHub - ivy-walobwa/responsive-pure-css-menu: Create a responsive mobile menu with CSS without JavaScript- repo for LogRocket Article

Create a responsive mobile menu with CSS without JavaScript- repo for LogRocket Article - ivy-walobwa/responsive-pure-css-menu

Starred by 62 users

Forked by 62 users

Languages CSS 66.5% | HTML 33.5% | CSS 66.5% | HTML 33.5%