Responsive layout

Different devices have different screen space, on smartphones a vertical layout might be advantageous over a horizontal. How can we create a responsive layout that automatically determines the screen width and adapts content accordingly, without messing around with media queries and having to customize the layout for each browser?

Taggings:

Submitted by Marcel Rene Hauri on Fri, 11/22/2019 - 11:38
5 answers

Submitted by Nico Hebenstreit on Mon, 12/16/2019 - 20:42

Taggings:

Submitted by Johannes Just on Mon, 12/16/2019 - 19:16

Taggings:

Submitted by Daniel Nikolaus Huber on Mon, 12/16/2019 - 19:06

Taggings:

Submitted by Daniel Nikolaus Huber on Mon, 12/16/2019 - 19:06

Taggings:

Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.

<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>

Submitted by Marcel Rene Hauri on Fri, 11/22/2019 - 11:41

Taggings: