Best IT Recipes

What is the best way to move an item that is from top to bottom in Revision Design

I have the following HTML format: what is an effective way to place this element on top of the desktop and bottom on mobile devices (width <640 pixels)? Since there are many different devices, I don’t want to write the position coordinates, as the content of the page height changes. Any suggestions?

<html> <head> .. </head> <body> .. <p>I am on the top of desktop page, and bottom of mobile page</p> ... </body> </html>
+10
html css css3 responsive-design
Jun 14 '13 at 19:33
source share
4 answers

Reordering elements of unknown heights in a responsive manner is best done using Flexbox. Although support for desktop browsers is not very convenient (IE is the main limiting factor here, support starts from version 10), most mobile browsers support it.

http://cssdeck.com/labs/81csjw7x

 @media (max-width: 30em) { .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .container .first { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-order: 1; order: 1; } }

http://caniuse.com/#feat=flexbox

Remember that Flexbox may interfere with other layout methods, such as typical grid methods. Flex elements configured to float may produce unexpected results in Webkit browsers using the 2009 specification ( display: -webkit-box ).

+17
Jun 14 '13 at 20:27
source share

Better compatibility than flexbox can be achieved with display: table-footer-group (IE8 +)
Reverse effect: to move the element higher than in the HTML code, you can try table-caption and table-header-group .

It does not work with self-replaceable elements like img or input , at least on Chrome (and this is quite normal), but it works fine with a div , for example.

EDIT: this is 2016, so flexbox (and Autoprefixer) all things \ o /

+4
Jun 14 '13 at 22:31
source share

I don’t know if this is the best approach, but you can replicate the same element wherever you want and play with the display: none / display: inline-block attribute. When it is viewed on the desktop, your css tells it to display the one on top and not the one on the bottom. Then, when viewed on a mobile phone, it should not display one on top and display the one below.

As I said, I'm not sure if this is the most efficient way to do this, but it works. If anyone else has a better solution, I would like to hear it.

+1
Jun 14 '13 at 19:39
source share

I assume that when you say "position", you mean that it does not move when scrolling. In this case you can use:

 p.className { position: fixed; bottom: 0; // for mobile devices top: 0; // for desktops }

Where the p element gets the class attribute as follows:

 <p class="className">I am on the...</p>

bottom and top will not exist at the same time that you will need to download the appropriate based on the device. For the desktop, you will also need to compensate your content with a div height so that it is not hidden under a fixed div

0
Jun 14 '13 at 19:43
source share


More articles:


All Articles