Home Change layout when width is less than X pixels

# Change layout when width is less than X pixels

brainstorm
1#
brainstorm Published in 2018-02-13 17:15:41Z
 I am developing a website using Laravel and Bootstrap. The website looks alright on desktop and mobile (first and third picture), but it looks ugly on the second picture, when I start reducing the width and it hasn't switched to mobile view yet. Desktop view: Distorted view (which I don't want): Mobile view: Here is the code that I currently have: @extends('layouts.app') @section('content') @if ($loggedIn) Navigation Recent Posts Here will be recent posts. Dashboard You are logged in as {{$user->name}}.
@else
Recent Posts
You are not logged in!
Here will be recent posts.
Dashboard
You are not logged in!
@endif @endsection  The question is: What do I need to do/add to force the website to switch to mobile view when the width is less or equal to 1105px?
HelloSpeakman
2#
HelloSpeakman Reply to 2018-02-14 19:39:47Z
 You should try playing around with the columns xs, sm, md, lg etc. Don't be afraid to use more than one column in a div - for example you have: 
 What about if you did something like this: 
 So this is saying in a small or extra small layout, go fullwidth. On a medium layout, use a quarter of the parent/row, on a large layout use a 6th of the parent/row. Be sure to make the other columns match 12 in total for sm, md, lg, xs etc.
Nikola Gavric
3#
Nikola Gavric Reply to 2018-02-13 17:32:17Z
 You can create your own version of Bootstrap 3 with the wanted breakpoints and just press compile and download and you are good to go. Check the breakpoints under Container sizes, just search for the keyword, once u get on the link.
 You need to login account before you can post.
Processed in 0.300268 second(s) , Gzip On .