Css in different resolutions and browsers

Asked

Viewed 89 times

0

I have the componente1 and the componente2 follow the example:

body {
  margin: 0;
}

.componente1 {
  width:250px;
  float: left;
  background-color: green;
  height: 340px;
}

.componente2 {
  width:250px;
  height: 340px;
  float:left ;
  background-color: red;
}

@media only screen and (max-width: 601px) {
  .componente1 {
margin-top: 345px;

  }
  .componente2 {
margin-top:-345px;

  }

}
<div>
  <div class="componente1">
    
  </div>
  <div class="componente2">
    
  </div>
</div>

Goal and do the componente2 stay above the componente1 in resolution below 600px width. This example works in IE and Chrome, but in Firefox 30px overwriting the componente1.

Recalling that the answer has to be compatible with the main navigation vehicles.

css

  • Have you tried using percentage instead of pixel?

  • Already but I get very incompatible but try there sometimes you can do right.

  • Can you put an example of how you want it to look? for me it looks like Chrome and FF... http://jsfiddle.net/cwdrhpke/show/

  • Replace "@media only screen and (max-width: 601px)" with "@media only screen and (min-width: 601px)", I use this a lot and have no problem and always use "min"

2 answers

1

The biggest problem with your code is that you haven’t reset the main properties of things, so the result is unpredictable.

See the important points added here:

  • reset to margin, padding, and position:relative on Ivs and the whole page;

  • box-Sizing to make the pixel size predictable, independent of padding, edge, and other details

  • clear:Both to break the float in separate lines;

  • top usage instead of margin;

  • if you want, put width: 100% inside them, to take the whole width.

body, html, div {
  position: relative;
  padding: 0;
  margin: 0;
}

.componente1, .componente2 {
  box-sizing: border-box;
}

.componente1 {
  width:250px;
  float: left;
  background-color: green;
  height: 340px;
}

.componente2 {
  width:250px;
  height: 340px;
  float:left;
  background-color: red;
}

/* colocar media query daqui pra baixo */

.componente1 {
  top: 340px;
  clear:both;
}

.componente2 {
  top: -340px;
  clear:both;
}
<div>
  <div class="componente1">
    C 1
  </div>
  <div class="componente2">
    C 2
  </div>
</div>

  • The problem still persists clear:Both; not getting, there is some way to climb the component2 without the margin-top?

  • But I didn’t use margin top. And have to see the rest of the problems on the page you are using, because the problem may be elsewhere.

0

  • Just one observation. I had already commented in the first line of my answer that the problem was to reset the properties. Obviously to reset all, you have to know which ones are being used (you can use these ready resets, but usually you end up resetting even what you do not need, unnecessarily loading the CSS).

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.