CODEWITHSUNDEEP
twitter-bootstrapcssresponsive-designmedia-queries
Elton Santos
Elton Santos

Reputation: 581

Responsive layout is not exactly in the position I want

I have been trying to leave a responsive layout a week ago that is very similar to a website I found, but I can not do it at all. I am sending the images of the responsive site that I saw and I am sending the image of how is mine.

The site I want to do similar is this:

http://mapa.buenosaires.gob.ar

And the site I want to do the same is in git, you can make the clone, download, share, whatever you want:

https://github.com/eltonsantos/snippets_uteis/tree/master/sidebar_bootstrap

The normal part of the site, full screen and big I was able to do exactly as I want, but the responsive part I'm not getting, everything is broken, distorted and in the wrong place. Please, can anyone help me?

enter image description here enter image description here

enter image description here enter image description here

Even though I use the media queries I can not exactly leave it as it is on the site and I would at least understand why. Can someone help me?

Upvotes: 1

Views: 46

Answers (1)

ImJezz
ImJezz

Reputation: 76

CSS reads from top to bottom, what that means is that changes that has been done to an element on the mobile version, may get a new style if the desktop css property is read after. So what you will hade to do is to reset css code.

For an example, 

// This is mobile CSS
.btn {
    color: red;
} 

@media screen and (max-width: 500px) {
    // this is desktop CSS
    .btn {
        color: blue;
    }
}

If we we're to leave the desktop CSS btn without color, it would automatically have the color red. But now we override it.

Upvotes: 2

Related Questions