Web Connection
Media queries
Gravatar is a globally recognized avatar based on your email address. Media queries
  Luca
  All
  Oct 5, 2018 @ 05:24am

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

Gravatar is a globally recognized avatar based on your email address. re: Media queries
  Rick Strahl
  Luca
  Oct 5, 2018 @ 01:39pm

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 ---

Gravatar is a globally recognized avatar based on your email address. re: Media queries
  Luca
  Rick Strahl
  Oct 5, 2018 @ 10:49pm

Many many thanks again,
I am ever more enthusiast to develop with Web Connection!

© 1996-2024