CODEWITHSUNDEEP
htmlcss
Damien
Damien

Reputation: 4121

Css and Media Queries

I have the following css where I want to scale out from a page on smaller resolution screens

    @media screen and (max-width: 1331px) {
    .homePageStyle {
        transform-origin: 70px 0px;
        transform: scale(0.93, 0.93); 
    }
}

This works perfectly in chrome, but in IE it leaves a good bit of padding on the right hand side of the page and shows a scrollbar

Is there anything I can add to this to stop a scroll bar appearing and have no padding on the right in IE

Upvotes: 0

Views: 150

Answers (3)

user4616966
user4616966

Reputation:

I'd recommend just setting the overflow-y: hidden;. The scrollbar automatically adds padding, and overflow-y just gets rid of it as a whole. Mind you, it shouldn't cut anything off if you have your screen size and all configured correctly with the media property.

Your code:

    @media screen and (max-width: 1331px) {
    .homePageStyle {
        transform-origin: 70px 0px;
        transform: scale(0.93, 0.93); 
        overflow-y: hidden;
    }
}

Difference between overflow-y and overflow-x and overflow in general is overflow-y only changes affects on the screen vertically whereas overflow affects the screen overflow as a whole, and overflow-x obviously affects the horizontal part. I mean, if you know your graphs, it's basically (x,y), but you can't scroll over to see the remainders of that figure if it's out of the default view.

Upvotes: 1

geeksal
geeksal

Reputation: 5016

IE had lots of problems. So there are two things you could do.First target IE specific browser and second use browser vendor prefixes.

For IE 10+ you can use following code

@media screen and (max-width: 1331px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* Affects IE10+ only*/
  .homePageStyle {
       -ms-transform-origin: 70px 0px;
       -ms-transform: scale(0.93, 0.93); 
       padding-right:0; /*see if it do the magic else ignore */
       overflow:hidden;
   }

 }

For IE 9 and lower you can use conditional comment

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie-9andbelowonly.css" />
<![endif]-->

You can also use some hack

For IE 6,7 and 8

@media \0screen\,screen\9 {
    selector{ /*css rules*/ }
}

For IE 8

@media \0screen{
    selector{ /*css rules*/ }
}

For IE 8

@media screen\0{
    selector{ /*css rules*/ }
}

Note: They are hacks. Hence they may or may not work.

Reference:

Moving IE specific CSS into media blocks

How To Create an IE-Only Stylesheet

Upvotes: 1

Mark Rossiter
Mark Rossiter

Reputation: 76

IE has historically had problems with the transform property. I do not know what version you are using but IE11 supports these properties.

If you are using earlier versions give -ms-transform a try:

@media screen and (max-width: 1331px) {
.homePageStyle {
    -ms-transform-origin: 70px 0px;
    -ms-transform: scale(0.93, 0.93);
    transform-origin: 70px 0px;
    transform: scale(0.93, 0.93); 
}
}

As a note, you can hide overflowing content with CSS if it is suitable (it may very well not be in your scenario, but again, I would need more info before giving anything conclusive):

@media screen and (max-width: 1331px) {
.homePageStyle {
    transform-origin: 70px 0px;
    transform: scale(0.93, 0.93); 
    overflow: hidden;
}
}

If you have something I can look at I'd be happy to provide further support.

The following post might also be of assistance, in at least explaining why such problems occur: IE showing horizontal scrollbar after dom element transformed

Upvotes: 1

Related Questions