Can someone help me transform this code to responsive code? [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }
p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container {
display: block;
width: 100%;
background: #fff;
padding: 14px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* comments area */
#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }
#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }
#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; }
#comments .cmmnt .replies { margin-bottom: 7px; }
<div id="w">
<h1>Threaded Comments Block</h1>
<div id="container">
<ul id="comments">
<li class="cmmnt">
<div class="avatar"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></div>
<div class="cmmnt-content">
<header>DarkCubes - <span class="pubdate">posted 1 week ago</span></header>
<p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></div>
<div class="cmmnt-content">
<header>Sir_Pig - <span class="pubdate">posted 1 day ago</span></header>
<p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
<p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></div>
<div class="cmmnt-content">
<header>Pikabob - <span class="pubdate">posted 6 days ago</span></header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>MyUsername - <span class="pubdate">posted 5 days ago</span></header>
<p>This is another anonymous comment. Maybe we can place <strong>some bold text</strong>. Then afterwards we can do some <u>underlined text</u>. And even a link to Google.</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/good-news-everyone.png" width="55" height="55" alt="Professor photo avatar"></div>
<div class="cmmnt-content">
<header>Professor - <span class="pubdate">posted 3 days ago</span></header>
<p>Good news, everyone!</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>Anonymous1 - <span class="pubdate">posted 2 days ago</span></header>
<p>Smaller third-tier inline threaded comment post. Look how deep we can go.</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/maximus.png" width="55" height="55" alt="Maximus photo avatar"></div>
<div class="cmmnt-content">
<header>Maximus - <span class="pubdate">posted 5 days ago</span></header>
<p>Hey man, just another sub-reply. Okay bye.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>FreddieFantastic - <span class="pubdate">posted 11 hours ago</span></header>
<p>So this is neat.</p>
<p>Hello, world!</p>
</div>
</li>
</ul>
</div>
</div>
I am building a forum site and i found the following tutorial for threaded comments block. The following code is threaded comments block for my website but is not responsive for mobiles phones and tablets.
Can someone help me transform this code to responsive code?
I know that I should use media queries but don't know how to do it.
To be clear i just want an example.

Answer 1

The simplest implementation of media queries would be to put something like this at the bottom of the css that you submitted:
#media screen and (max-width: 767px){
/* YOUR STYLES GO HERE.
* You can now use the exact selectors you use above,
* and when the screen is under 767px wide (such as most phones)
* this CSS will render, rather than the previous code.
*/
}
Also don't forget the meta viewport header.
Ultimately, you will have to choose device widths that you want to break at.
You will also need to figure out what you want to be different on different browsers.
Also, don't forget to test in browsers.
For a good comprehensive primer on the core techniques of responsive, check out google's overview.