user2923339
Reputation: 159
Responsive layout in pure css
I'm struggling with CSS and HTML and encountered a big pitfall. My HTML code is:
/* 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;
}
/* Code comes below */
body {
background-color: lightgray;
}
.wrapper {
width: 100%;
background-color: #feecec;
}
.info {
width: 100%;
}
.pink {
padding: 5px;
margin: 16px;
font-family: arial;
font-size: 16px;
color: #111;
border-radius: 5px;
border: 1px solid #cf894c;
background-color: #fdeddc;
}
.blue {
padding: 5px;
margin: 16px;
font-family: arial;
font-size: 16px;
color: #111;
border-radius: 5px;
border: 1px solid #3f79b7;
background-color: #e8f6ff;
}
@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;
}
}
@media only screen and (min-width: 1200px) {
.wrapper {
width: 100%;
margin: 0 auto;
}
}
@media only screen and (min-width: 1500px) {
.wrapper {
width: 1500px;
margin: 0 auto;
}
}<!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 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 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 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 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 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 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 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>
</body>
</html>I have a div- wrapper and inside it- six divs with paragraphs. When I add padding: 1px to the wrapper I get almost the desired state(only skewed by 1px bottom-right). If I don't add it, on the top and the bottom of the wrapper browser creates kind of margins 16px. Why is it so? I want to keep the 16px distance from the "p" element to the wrapper (and to each other) but I don't want the wrapper to hold the 16px distance from the top border. I'd be grateful for any of your help. The main goal is to create a fully responsive, simple layout with a bunch of elements thrown inside of a main, centrally located wrapper.
Upvotes: 0
Views: 1229
Answers (2)
user2923339
Reputation: 159
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>Upvotes: 0
Jaziel_Inc
Reputation: 82
I think you need to add a position to the wrapper, try adding position: absolute; to the wrapper class.
https://jsfiddle.net/kgwfytuj/2/
Upvotes: 2