CODEWITHSUNDEEP
twitter-bootstrap
Mo J. Mughrabi
Mo J. Mughrabi

Reputation: 7007

disabling responsiveness in bootstrap for mobile phones and tablets

I've developed a web site using bootstrap and I did not include the bootstrap-respinsive.min.css in the code. Everything seems to work fine on desktops, but when accessed from mobile or tablet its getting shrunk and thus its getting messed up.

How can I make my code stick to the a minimum scale down width? below is my HTML head

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta content="Obytes, Orange Bytes, Startup, Django, Python, PostgreSQL" name="keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="img/favicon.png" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="fonts/font.css"/>


    <title>The title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.min.css" media="screen" rel="stylesheet">
</head>

Upvotes: 1

Views: 1564

Answers (1)

Michael Freake
Michael Freake

Reputation: 1207

First issue I see is no <body> tags in your code. This may be causing some issues for you.

Second, without knowing the contents of your style.css I can only guess. Having said that I'm thinking the min-width setting for your body tags may be getting overridden if you are indeed setting one. The solution for this would be to either link to your CSS file after bootstrap.min.css like so:

<link href="css/bootstrap.min.css" media="screen" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">

Or you could set the min-width of your body tag after your existing code:

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" media="screen" rel="stylesheet">
<style>
body{min-width: 1024px;}
</style>

Give these a try and let me know the result.

Note: I am assuming you understand the cascading part of stylesheets. Please say so if you do not.

Upvotes: 1

Related Questions