CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BakaNeko
BakaNeko

Reputation: 21

Why does media queries using bootstrap doesn't work on mobile screen but works when window is resized

I have added a media query to my code and it works fine when I resize the window in my browser but when switching to the mobile view it doesn't work the way I want it to work. What am I doing wrong here?

The browser view:

enter image description here

The Mobile view looks like this:

enter image description here

And, when I resize the window in my device it looks like this (Is what I am trying to achieve in the mobile view) :

enter image description here

--

Below is the media query trigger for this :

@media (max-width: 770px) {
    #title {
        text-align: center;
    }
    .title-image{
        position: static;
        transform: rotate(0);
        width: 70%;
    }
}

I don't know what to do here. I am following a course on udemy and they didn't mention this or I may have skipped that part by mistake. And I watched it again but I still am stuck here. It would be a great help if someone could point me in the right direction.

Upvotes: 0

Views: 76

Answers (1)

MaZoli
MaZoli

Reputation: 1533

You probably need a viewport defined in the header of your HTML Doc. This will tell the website what size it should be. It probably thinks it should render Desktop-View. Use this:

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

Upvotes: 2

Related Questions