html - Responsive Web Design - switching between tabular and compact layout -
when viewer has wide enough window (desktop/tablet) want use tabular layout information:
on narrower windows (e.g smartphone) want more compact layout
i want achieve layout-change using css without change in html
my html uses simple <h2> , <p> elements headings , content.
i've played around css float:left , display:inline found difficult achieve want.
what simplest way achieve in css while adhering "responsive design" , "mobile-first" principles?
here's came with.
the compact layout close default display <h2> , <p> , default layout css - "mobile first".
a media selector used modify layout devices window wider.
float: left used allow headings line-up vertically following text.
the top , bottom margins set 0 on headings headings single line of associated content don't interfere each other causing staggerred layout.
margin-left: 13em used keep content clear of headings , produce visual representation similar expected if html had used <table>.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>test folding</title> <style> h2 { font-size: 100%; font-weight: bold; } p { margin-left: 1em; } @media screen , (min-width: 600px) { h2 { margin-top: 0; margin-bottom: 0; float:left; } p { margin-left: 13em; margin-top: 0; } } </style> </head> <body> <h1>test folding</h1> <h2>lorem ipsum</h2> <p>dolor sit amet</p> <h2>lorem ipsum dolor</h2> <p>sit amet consectetur</p> <h2>lorem ipsum</h2> <p>dolor sit amet consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <h2>lorem ipsum dolor</h2> <p>sit amet consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
Comments
Post a Comment