The division is much broader than it should be

I’m trying to make my site a little more mobile-friendly. I have some graphs that look best when they can be pretty wide (800px), but I would prefer for them to shrink on mobile instead of having a scroll bar. I’ve added this to a stylesheet:

@media screen and (max-width:600px){
    div.graph {
        max-width: 100%;
        margin: auto;
        height:400px;
    }
}
@media screen and (min-width:601px){
    div.graph{
        max-width: 800px;
        margin: auto;
        height: 400px;
    }
}

And included that in my master page:

Here is one of the divs that holds a graph:

The problem is when I view the page with the browser full-size now, the graph is huge–far more than 800 px. Even if I change the max-width to something ridiculous like 25px, it’s still huge. Any thoughts?

Do like this (and make sure custom CSS is loaded last if you use a library)

Update based on a comment

Since inline style work, add !important
like this and it should work


width: 800px !important;


max-width: 100% !important;

and if it does work, you do have another rule overriding these or else they would have worked without the !important

div.graph{
  width: 800px;
  margin: auto;
  height: 150px;
  background: red
}

@media screen and (max-width:800px){
    div.graph {
        max-width: 100%;
    }
}

In this particular case you actually don’t need the media query at all

div.graph{
  width: 800px;
  max-width: 100%;
  margin: auto;
  height: 150px;
  background: red
}
Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » The division is much broader than it should be

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录