-5
Kann mir jemand helfen, diesen Code in reaktionsfähigen Code umzuwandeln?
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">
\t \t \t \t <li class="cmmnt">
\t \t \t \t <div class="avatar"><a href="javascript:void(0);"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></a></div>
\t \t \t \t <div class="cmmnt-content">
\t \t \t \t <header><a href="javascript:void(0);" class="userlink">DarkCubes</a> - <span class="pubdate">posted 1 week ago</span></header>
\t \t \t \t <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>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <ul class="replies">
\t \t \t \t <li class="cmmnt">
\t \t \t \t <div class="avatar"><a href="javascript:void(0);"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></a></div>
\t \t \t \t <div class="cmmnt-content">
\t \t \t \t <header><a href="javascript:void(0);" class="userlink">Sir_Pig</a> - <span class="pubdate">posted 1 day ago</span></header>
\t \t \t \t <p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
\t \t \t \t <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>
\t \t \t \t </div>
\t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t \t </li>
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Pikabob</a> - <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"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">MyUsername</a> - <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 <a href="http://www.google.com/">link to Google</a>.</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/good-news-everyone.png" width="55" height="55" alt="Professor photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Professor</a> - <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"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Anonymous1</a> - <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"><a href="javascript:void(0);"><img src="images/maximus.png" width="55" height="55" alt="Maximus photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Maximus</a> - <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"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">FreddieFantastic</a> - <span class="pubdate">posted 11 hours ago</span></header>
<p>So this is neat.</p>
<p>Hello, world!</p>
</div>
</li>
</ul>
</div>
</div>ich ein Forum Website baute und ich fand das folgende Tutorial für Gewinde Kommentare Block. Der folgende Code ist ein Thread-Kommentarblock für meine Website, reagiert jedoch nicht auf Handys und Tablets.
Kann mir jemand helfen, diesen Code in reaktionsfähigen Code umzuwandeln?
Ich weiß, dass ich Medienabfragen verwenden sollte, aber nicht weiß, wie es geht.
Um klar zu sein, ich will nur ein Beispiel.
Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –
Nur damit Sie es wissen (weil die Leute die lästige Gewohnheit haben, zu downbooten, ohne zu erklären, warum der Stack überläuft), werden Sie mit dieser Frage abgelehnt, weil Sie im Grunde andere Leute bitten, Ihre Arbeit für Sie zu tun. Was Sie tun müssen, ist zu lernen, wie Medienanfragen selbstständig funktionieren. Befolgen Sie einige Tutorials. Wenn Sie dann immer noch stecken bleiben, kommen Sie hier mit einer spezifischen Frage zurück. Denken Sie daran, diese Website soll Fragen und Antworten erstellen, nach denen andere wahrscheinlich suchen werden. Diese Frage ist sehr spezifisch für Sie und Ihre Situation. – Clonkex
Sorry für Missverständnisse, ich habe nicht gebeten, meine Arbeit zu tun, ich brauchte nur ein Beispiel für den Code. Es tut mir sehr leid, die meiste Zeit schreibe ich PHP-Codes, aber CSS ist nicht mein Ding. –