Why Does My Mobile Device Still Treat My Viewport As A Desktop?

I am doing a quick mobile version of my desktop site in bootstrap and running into some formatting issues. When I expand this view on my desktop, my icons show in a 3 by 4 grid ju

Solution 1:

You need <meta name="viewport" content="width=device-width, initial-scale=1">

Here is a guide on viewports for mobile devices Using the viewport meta tag to control layout on mobile browsers

Solution 2:

You haven't set your viewport in the head. - that's a critical error!

Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head.

You also need to look into media queries.

Add @media screen and (max-width:480px) {your styles} and same for 768px to your css. (ipad) start there.