Reputation: 72
So I have a website that is built on bootstrap (Navigation + Body Container) so everything should be responsive.
I have everything in rows and columns (col-lg-12).
So my question here is this. I have my body container column size as (LG - Large (incase anyone gets confused with the phone's))
When I access this website from my computer and I resize the screen, it works as expected, pretty good. (Since I followed a tutorial)
But when I access the website from my mobile phone, the website looks like what I would see on a full screen PC screen.
I looked online and an article said to use two classes for the DIV's inside the ROWs. So this is what I did.
<div class="col-lg-12 col-xs-12">Content!</div>
This also doesn't work. How would I go on to making my bootstrap more mobile compatible as it does when I resize my browser?
Do I have to make the website redirect to a mobile version when accessed on mobile like most websites? Or do I have to include a certain meta tag in my head?
Upvotes: 1
Views: 71
Reputation: 20235
My best guess is that you don't have the viewport meta tag in your <head>
which tells the browser to use the device's width as the html document's width. See the basic template docs.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
Upvotes: 3