-3
Ich bin ziemlich neu in der Codierung, also weiß ich, dass es weit von perfekt ist! Ich bin nur auf der Suche nach etwas Hilfe, um diese Seite auf einem Mobiltelefon anständig aussehen zu lassen. Am wahrscheinlichsten werden der Text und das Bild stapeln; Ich bin mir nicht sicher, was ich mit Kopf und Fuß machen soll.Welche Anpassungen sind notwendig, um eine responsive Webseite zu erstellen?
<body>
<h1 div id= "header"> </h1>
<div id="logos"> <img id="logo" src= "https://msu.edu/~donald88/portfolio/logo02.png" </div>
<ul id="navigation">
<li> <a href= "http://kelsiedonaldson.com."> About</a></li>
<li> <a href= "http://kelsiedonaldson.com/portfolio.html"> Portfolio</a></li>
<li> <a href= "http://kelsiedonaldson.com/resume.html"> Résumé</a></li>
<li> <a href= "http://kelsiedonaldson.com/contact.html"> Contact</a></li>
</ul>
<h2> Project Spotlight </h2>
<h3> Refugee Development Center Newsletters </h3>
</br> </br>
<div id= "main">
<div class="project-image"><img src= "https://msu.edu/~donald88/portfolio/rdcnewslettertwo.png" alt="RDC newsletter" /></div>
<div id="spotlight-text"> <p class="project-text"> This is a project I did in a class during my freshman year of college. A member of the RDC staff came to my class to
give a general overview of what she wanted, and then we divided into teams to design two newsletters for this awesome organization. My team
consisted of three members, and we all worked together to write and design the newsletters. I specifically wrote the story pictured on the
left in the summer 2016 newsletter about the GLOBE camp program. I also helped collaborate on the design of both newsletters as far as color choice,
text formatting, and article length. I then edited my other team members' articles and helped assemble everything as a PDF that could be printed
or looked at online. Finally, my team gave a presentation to the rest of my class and the RDC staff member about our newsletter and the choices
we made while creating it. The client only had positive things to say about our design! </p>
<p class="project-text"> Completed: April, 2016 <br/>
Category: Web/Print </p>
</div>
<div class="back-button"> <a href= "http://kelsiedonaldson.com/portfolio.html"> Back to portfolio </a> </div>
<div class="portfolio-button"> <a href= "http://kelsiedonaldson.com/rdc_newsletters.pdf" target="_blank"> See full project </a> </div>
</div>
</p>
<div style="clear: both"></div>
<div style="clear: both"></div>
<footer class="footer">
<div class="container">
<div id="ftr-wrap">
<div class="ftr-links">
<div class= "table">
<ul>
<li><a href="https://twitter.com/Kelsdonaldson22"> <div class="icons"><img src= "http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png"></div></a></li>
<li><a href="https://www.facebook.com/kelsie.donaldson"><div class="icons"><img src= "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"></div></a></li>
<li><a href="https://www.instagram.com/kelsiedonaldson/"><div class="icons"><img src= "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"></div></a></li>
<li><a href="https://www.linkedin.com/in/kelsie-donaldson-965033115?trk=hp-identity-name"><div class="icons"><img src= "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-512.png"</a></div></li>
</div>
</ul>
</div>
<div class="copyright-amazon">
<p class="copyright">© Copyright Kelsie Donaldson 2016</p>
<p class="amazon"><a href="https://www.instagram.com/kelsiedonaldson/"><img
</div>
</div>
</div>
</footer>
CSS:
Body {
background-image: url("http://www.publicdomainpictures.net/pictures/140000/velka/grey-white-background.jpg");
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
#header {
height: 120px;
width: 100%;
min-width: 1200px;
background-color: #b196db;
text-align: center;
font-family: 'Yesteryear', cursive;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 120px;
font-size: 100px;
position: relative;
}
#logo {
height: 110px;
max-width: 880px;
padding: 30px;
padding-top: 10px;
padding-bottom: 28px;
margin-top: -10em;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}
#navigation li {
display: inline;
list-style-type: none;
padding: 50px;
float: center;
text-decoration: none; }
#navigation {
text-align: center;
min-width: 1160px;
height: 30px;
background-color: #35b7ab;
margin-top: 0px;
top: 140px;
padding-top: 15px;
font-family: Lucida bright;
font-size: 20px;
color: white
}
a {
text-decoration: none;
color: white;
}
a:hover{
color: #867289; }
h2 {
font-size: 50px;
color: #66096c;
font-family: 'Philosopher', sans-serif;
text-align: center; }
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
body {
padding:0;
margin: 0;
}
.footer {
position: absolute;
margin-bottom: -30;
margin-top: 10px;
bottom:0;
width:100%;
min-width: 1200px;
background-color: #b196db;
}
.footer p {
color: #fff;
font-size:1em;
display: inline-block;
position: relative;
bottom: 10px;
float: right;
}
.container {
max-width: 1674px; /* adjust to allow for padding as needed */
padding:0 50px; }
#ftr-wrap {
display:table;
table-layout:fixed;
width:100%;
margin:0 auto; }
#ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}
.ftr-links ul {
padding: 0;
display: inline-block;
position: relative;
margin: auto;
width: 100%; }
.table {
position: relative;
display: table;
margin: 0 auto;
display: inline-block;
list-style: none;
margin-left: 45%;
bottom: -50; }
.ftr-links ul li {
display: inline-block;
padding-right: 15px;
font-size:.75em; }
.ftr-links ul li a {
display: inline-block;
color: #fff;
margin: 0; }
.icons > img {
display: inline;
height: 40px;
width: 40px;
padding-bottom: 20px; }
#main{
height:800px;
width:100%;
}
#main {
height:500px;
width:100%;
}
.project-image{
width:40%;
color: #66096c;
height:100%;
float:left;
margin-left: 7em;
padding-right: 3em;
}
div#spotlight-text {
width:40%;
height:100%;
float:left;
font-family: Lucida Bright;
font-size: 20px;
color: #66096c;
margin-right: 2%;
}
h3 {
font-size: 30px;
color: #867289;
text-align: center;
font-family: Lucida Bright;
Hilfreiche Tipps: Ändern von HTML-Code, so dass es reaktionsfähig ist möglicherweise Stunden der Arbeit wert, so wäre hier zu breit (und die meisten Orte im Web). Seien Sie auch vorsichtig bei Fragen, die grundsätzlich "Bitte helfen Sie mir" - es ist sehr häufig für Fragen in dieser Art und Weise in "tun es für mich" gleiten. Wenn Sie dies in "wie man zwei divs reagieren kann, hier ist genau das, was ich versucht habe", dann wäre das eine gute Frage. HTH! – halfer