Web Connection
Media queries
Dear Rick,
I would like to give to wwWebPanel a width=100% until resolution of 600px then a width=600px so:
<head>
<style type="text/css">
@media screen and (max-width: 600px) {
.wwWebPanel {width: 100%}
}
</style>
</head>
and
<body>
<form>
<ww:wwWebPanel ID="wwWebPanel1" runat="server" width="600px" >
</ww:wwWebPanel>
</form>
</body>
Unfortunately it does not work.
Please what is wrong?
Thank you very much
You can't set the width
on the actual element. The element's style will always override your style sheet settings.
If you want media queries to work you have to set the width
in your CSS styling, not on the element:
#MyPanel.wwWebPanel { width: 600px; }
@media screen and (max-width: 600px) {
#MyPanel.wwWebPanel {width: 100%}
}
then remove the width on the element.
In some cases you can also use the !important
post-fix:
.wwWebPanel {width: 100% !important; }
but I don't think that'll work if you have an explicit width setting on the element.
+++ Rick ---