Twitter Bootstrap Question posted in

Twitter Bootstrap – Styling does not display on mobile browsers

My website is located at http://www.elgami.com/

I’m using Twitter Bootstrap for my styling. Everything works fine on desktop, but my styling does not display on mobile browsers, except for when I hard-code it in, of course. What could be going wrong?

My header is displayed below:

My css files are located in the folder “css” in my public_html root directory.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hypercycle™ - Personalize Your World.</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/blog.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway:400,800,900">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:100,200,400,600">

  <link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />

</head>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Removing the @media tag entirely really messed with the layout (but that's probably an issue that is peculiar to my website), so I did the following: 

    @media (min-width: 0px) {
  .container {
    width: 100%;
  }

  2. 0

    Remove 

     @media (min-width: 1200px) {

    from line 32 of your blog.css. It is telling the browser to only style it when the site is larger than 1200px.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search