Css in different resolutions and browsers

Navigation
0

I have componente1 and 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 make componente2 above componente1 at resolution below% width%. This example works in IE and Chrome, however in Firefox it gets 600px overwriting 30px .

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

    
asked by anonymous 03.12.2014 / 18:13

2 answers

1

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

See the important points added here:

  • reset margin, padding, and position: relative in the divs and the entire page;

  • box-sizing to make the size in pixels predictable, regardless of padding, border, and other details

  • clear: both to break the float on separate lines;

  • Use of top instead of margin;

  • If you want, put width: 100% inside them, to get 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>
    
03.12.2014 / 18:33
0

The problem of browser incompatibility has been solved by this:

link

I'm leaving the link and not the code to give a credit to who put.

    
03.12.2014 / 21:54
Insert into mysql database How can I create a DataGridView with Mongodb?