Set different CSS size for each browser

Asked

Viewed 539 times

-1

I have a little problem with my code, in case I have a banner that in Chrome and Opera, it appears in the exact size of the entire screen, but in Edge and Mozilla it appears broken not occupying 100% height with others.

In CSS it looks like this: (OBS: To work the banner it needs to be height: 100vh, but when applying this measure to height, the proportion of the banner in mobile and Chrome browser is disproportionate to the size of the div.)

.sec0{
    background-size: cover;
    background-attachment: fixed;
    background: no-repeat;
    -webkit-background-size: 100%;
    text-align: bottom;
    background-size: 100%;
    width: 100%;
    -webkit-width: 100%;
    -moz-width: 100%;
    -moz-height: 100vh;
    -ms-width: 100%;
    -ms-height: 100vh;
    -o-width: 100%;
    -o-height: 100vh;
    background-image: url("img/banner1.jpg");
}
html jquery css bootstrap browser
  • 2

    About the image to be proportional try to put background-size:cover to see if it helps. Another width and height thing doesn’t need a prefix type -o- and -Moz- etc! If possible Edit your question with the full CSS as well as HTML. The way you put it does not answer you accurately.

  • Thanks for the suggestion! I used a CSS Hack for each browser and solved my problem

1 answer

-1

To solve the problem I used a CSS Hack in the case of

Mozilla:

@-moz-document url-prefix() { /* CSS no qua queira utilizar somente nesse navegador */ }

Edge: 

@supports (-ms-ime-align:auto) {
 /* CSS no qua queira utilizar somente nesse navegador */
}

Browser other questions tagged html jquery css bootstrap browser

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