Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>use media queries to control responsive width designs</p> <pre><code>@media all and (max-width: 1152px){ .icons { //here you can control class="ico" } } </code></pre> <p>not only for width, you can control for particular height screens..</p> <p>media queries not support ie less than ie9. We have only one way.. try this </p> <p>1st download this jquery script from </p> <p><a href="https://gitorious.org/css-media-queries-for-ie/css-media-queries-for-ie/blobs/master/css-media-query-ie.js" rel="nofollow">https://gitorious.org/css-media-queries-for-ie/css-media-queries-for-ie/blobs/master/css-media-query-ie.js</a></p> <pre><code>&lt;!--[if lt IE 9]&gt; &lt;link rel="stylesheet" type="text/css" href="styles1.css" media="only all and (max-width: 480px)" id="stylesheet-480" /&gt; &lt;link rel="stylesheet" type="text/css" href="styles2.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" /&gt; &lt;link rel="stylesheet" type="text/css" href="styles3.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" /&gt; &lt;script type="text/javascript" src="/js/css-media-query-ie.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; </code></pre> <p>and another one thing. in your code menu and container image parts are aligning correctly, that icon part only have problem. I think you dont need to use media queries. U did some mistake on icon part. If u correct this it will work very well in all browsers even ie6 without media queries. If u let me check your code, i can done this.</p> <p>In icon container you align by</p> <blockquote> <p>margin-right:6.5%;</p> </blockquote> <pre><code>.icons { margin-right:6.5%; } </code></pre> <p>check how you aligned that top menu and bottom image container from right.</p> <p>when you are using media queries u should understand on thing. you must order higher to lower. like this</p> <pre><code>@media all and (max-width:1280px) { .icons { width:108px; margin-top: -42px; margin-right:6.5%; } } @media all and (max-width:1152px) { .icons { width:108px; margin-top: -42px; position:absolute; right:0px; margin-right:11.5%; } } @media all and (max-width:1024px) { .icons { width:108px; margin-top: -42px; position:absolute; right:0px; margin-right:6.5%; } } </code></pre> <p>all the best... </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload