Home/ Questions/Q 9202185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:11:42+00:00

I am creating a responsive web design using media queries. For the mobile version

  • 0

I am creating a responsive web design using media queries. For the mobile version I use a drop down menu using jquery mobile.

I have included required links to the CDN, including the jquery-mobile.css.
The problem is that this CSS is getting automatically applied to all my tags for the entire website.

The menu bar is in the master page so the .js and.css source file links are in that page as well.

I want jquery mobile css to be applied only to the menu bar and not the entire website

I did a lot of research on this but no luck. I have been stuck here from past three days. Can someone please help me?

Edit:

    <head id="Head1" runat="server">


          <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript">
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input, a, div, p";
    });    
</script>
<script src="../Scripts/jquery.mobile-1.2.0.js"></script>
        <link rel="stylesheet" href="../Styles/WebStyles.css" type="text/css" />

        <title>Management Software, Space Rental process for Antique Malls, POS Software</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
</head>

This is the content in the head tag after Gajotres’ suggestion.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In my circumstance, after a fair amount of research, I found that the best solution for my problem is to find out what style is affecting which element using firebug and then deleting it in the jQuery-mobile.css file (you have to download it instead of accessing the hosted file). It took me a while to do this.

    Also IMHP it is better to use single framework to perform all your fancy jQuery work rather than many since finding the source of the conflict is very time consuming and tiring.

    I am converting all my jquery plugins to work on jQuery mobile and so far things are going good. Although this takes time, jQuery mobile is awesome and worth converting I feel. The UI suits very well for the web site I am currently developing.

    Finally, lesson learnt. Plan ahead.

    • 0