Search code examples
htmlcssmedia-queriescss-transitions

dispay none not working for transition

i have used media queries to hide the iphone image and display the desktop image..... but he iphone image is not showing up.... can you tell me the reson

http://jsfiddle.net/QYvrt/27/

<div class="desktopContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">desktopImage</div>

                        <div class="iphoneContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/cubes/demoImage.png">iphoneImage</div>


@media (max-width: 767px) {

#rightSlider{
    border: 1px solid red;
}

#rightSlider{
            display:none !important;
          }
#rightSlider{ 
            display:inherit !important;
          }

.desktopContactImage{

            display:none !important;
          }

.iphoneContactImage{
            display:inherit !important;
            border: 1px solid red;
          }



}
Solution

  • Some issues need looked at which may help:

    1. You don't have a doctype declared before your HTML tag e.g.

    2. Try writing your media queries tags like this "@media screen and (max-width: 767px)"

    3. You have a lot of script tags that are floating between the HTML tag and the HEAD tag - they should either be within the HEAd tags or within the BODY tags.

    That is some amount of JavaScript you have going on there. When it comes to making it live for real users I'd recommend minifying and compressing it all.