Databases
StackOverflow2013
Postsdbo
POResponsive is not working?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive is not working?
    text
    copied!<p>I was trying to make some images responsive but failing everytime.</p> <p>This is my html codes</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="inner"&gt; &lt;div style="margin-top:30px;"&gt;&lt;img src="nature/logo.png"&gt;&lt;/div&gt; &lt;div id="content"&gt; &lt;div class="socials"&gt; &lt;/div&gt; &lt;div class="nature"&gt; &lt;ul class="reset"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/img7.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a onClick="javascript:sendpage();" style="cursor:pointer;"&gt;&lt;img src="nature/img2.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/mg3.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/img4.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/img5.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/img6.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="nature/img4.png"alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and this following this css file</p> <pre><code>.nature { display:block; width:150px; height:150px; background:url(../nature/img1.png) no-repeat; cursor:pointer; position:relative; } .socials, .nature { margin:0 auto; } .socials { margin-bottom:50px; } ul.reset, ul.reset li { display:block; list-style:none; padding:0; margin:0; } } ul.reset li { position:absolute; } ul.reset li a { outline:none; } </code></pre> <p>I have tried changing all px into percentile and also tried adding some media queries but nothing is happening im unable to find the problem</p> <p>Any suggestion will be great for my learning experience.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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