css - Move Content Down on Mobile Phones -


i'm trying move column of content down on mobile phones (no tablets), can't figure out. end goal move custom field data below body text.

via:http://beta.johnslanding.org/portland/canyon-hoops/

.one-fourth.last.right  

tried this:

@media screen  , (min-device-width : 400px) { -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; } 

you'll see on iphone theme keeps these 2 columns together:

enter image description here

the easiest way of doing moving div.three-fourths (your body content) above div.one-fourth (the sidebar content) in html, this:

<div class="three-fourths">...</div> <div class="one-fourth last right">...</div> 

because content area has float:left , sidebar has float:right exact width's set, rearranging html have no effect way looks, order of html.

and, clear floats , set new widths fill viewport under desired resolution. ensure tucks under body content under 480px screens.

@media (max-width:30em){   .three-fourths,   .one-fourth.last.right{     float:none;     width:100%   } } 

Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -