My divs are cut when i view the page in mobile screens

[harry_ord]

I'm using Bootstrap, this is my page:

http://codelcolab.feriapixel.cl/index.html

Whenever i shrink the window or i try to watch it on a mobile device, the divs are cut horribly. I can't understand what is causing the divs to shrink like that, what's stoping those divs to use the whole width?

This is how it looks:

[dsonesuk]

THIS!

@media screen and (max-width: 500px) {
div {
    width: 70%;
}
}

[harry_ord]

I'm afraid is not that. I just moved the whole css rules to within a <style> tag in my index.html and everything works fine. The problem is whenever i try to load the file from a external stylesheet i get that.

 

This is the order i load stuff on my header:

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<link rel="stylesheet" href="css/style.css">

<script src="js/video.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And this is the whole html file without loading the stylesheet externally and using a internal stylesheet with exactly the same content:

https://github.com/ashcrimson/codelco/blob/master/index.html

[dsonesuk]

I'm afraid it is that! Using firebug i inspect the problem element, it brings up that styling with link, you open link and it exactly shows that, and where it used in stylesheet, go back to firebug listing, disable width: 70%; and everything returns back to normal.

[dsonesuk]

I'm afraid it is that! Using firebug i inspect the problem element, it brings up that styling with link, you open link and it exactly shows that, and where it used in stylesheet, go back to firebug listing, disable width: 70%; and everything returns back to normal.

[harry_ord]

I don't know, man. I now put the css after the bootstrap javascript in the head and now everything is going ok. The problem is solved but, i don't know. Thanks anyway.