Need help with css. I would like the text and img to be responsive depending on
ID: 3875826 • Letter: N
Question
Need help with css. I would like the text and img to be responsive depending on the size of the screen. Right now the text and the img does not expand at the same rate. At full screen the page looks ok. Any other window size and the page looks off. Also the max-height wont set for the img. I want it because at a certain width/height the picture looks out of proportion.
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
</head>
<style>
body {
margin: 0;
background-color: #FAF7F4;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1E1E1E;
}
ul.topnav li {float: right;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #8D8D8D;}
ul.topnav li a.active {
background: #fd540b; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#fd540b, #f43e7f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#fd540b, #f43e7f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#fd540b, #f43e7f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#fd540b, #f43e7f); /* Standard syntax (must be last) */
}
#content{
margin:0;
padding:0;
}
#container{
}
p{
padding: 10px;
}
#topHeader{
padding: 10px;
text-align: center;
clear: both;
}
h1{
text-decoration: underline;
}
img{
float: left;
width: 20%;
height: 10%;
margin-left: 5%;
margin-top: 1%;
}
#text{
float:left;
width: 40%;
margin-left: 15%;
margin-top: 1%;
border-style: solid;
}
#botHeader{
border-style: solid;
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
<body>
<div id="container">
<nav>
<ul class="topnav">
<li><a href="#home">Contact</a></li>
<li><a href="#home">Resume</a></li>
<li><a href="#home">Dog</a></li>
<li><a href="#news">Food</a></li>
<li><a href="#contact">Coding Projects</a></li>
<li><a class="active" href="#home">About</a></li>
<li ><a href="#about">Home</a></li>
</ul>
</nav>
<div id="content">
<div id="topHeader">
<h1>About</h1>
<h3>Description </h3>
</div>
<div id="botHeader">
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget accumsan arcu.
Nam id lacus dolor. Cras sit amet nunc justo. Etiam scelerisque purus id nisi blandit, auctor faucibus sem congue.
Integer porta lorem sed nibh vestibulum feugiat.
Aliquam dignissim justo eu risus fermentum, pharetra auctor enim sagittis.
Nunc ornare massa libero, at dictum lorem facilisis vitae. Quisque tempor nisi et ultricies mattis. Phasellus sodales imperdiet urna vel fringilla. Sed enim lectus, auctor et est ut, mattis vehicula est. Duis finibus porta porta. In hac habitasse platea dictumst. Fusce nec eros faucibus felis facilisis dignissim. Quisque ac sapien commodo purus commodo volutpat. Nulla ipsum lorem, accumsan quis commodo id, porttitor in erat. Aenean viverra non diam eu auctor.</p>
<br/>
<p> fg </p>
<br/>
<p> gjf </p>
<br/>
<p> wehhweh </p>
</div>
<img src="2017.jpg" align="right">
</div>
</div>
</div>
</body>
</html>
Explanation / Answer
For the responsive image you have to fix the media screen size and what you have to show in that @media screen{ what ever code you are written in that it will work on that size which you set. }
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
</head>
<style>
body {
margin: 0;
background-color: #FAF7F4;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1E1E1E;
}
ul.topnav li {float: right;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #8D8D8D;}
ul.topnav li a.active {
background: #fd540b; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#fd540b, #f43e7f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#fd540b, #f43e7f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#fd540b, #f43e7f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#fd540b, #f43e7f); /* Standard syntax (must be last) */
}
#content{
margin:0;
padding:0;
}
#container{
}
p{
padding: 10px;
}
#topHeader{
padding: 10px;
text-align: center;
clear: both;
}
h1{
text-decoration: underline;
}
img{
float: left;
max-width: 20%;
height: auto;
position:relative;
margin-left: 5%;
margin-top: 1%;
}
#text{
float:left;
width: 40%;
margin-left: 15%;
margin-top: 1%;
border-style: solid;
}
#botHeader{
border-style: solid;
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
@media screen and (max-width: 600px){
#botHeader #text{
margin-left:0px;
width: auto;
}
#content img{
width: auto;
}
}
</style>
<body>
<div id="container">
<nav>
<ul class="topnav">
<li><a href="#home">Contact</a></li>
<li><a href="#home">Resume</a></li>
<li><a href="#home">Dog</a></li>
<li><a href="#news">Food</a></li>
<li><a href="#contact">Coding Projects</a></li>
<li><a class="active" href="#home">About</a></li>
<li ><a href="#about">Home</a></li>
</ul>
</nav>
<div id="content">
<div id="topHeader">
<h1>About</h1>
<h3>Description </h3>
</div>
<div id="botHeader">
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget accumsan arcu.
Nam id lacus dolor. Cras sit amet nunc justo. Etiam scelerisque purus id nisi blandit, auctor faucibus sem congue.
Integer porta lorem sed nibh vestibulum feugiat.
Aliquam dignissim justo eu risus fermentum, pharetra auctor enim sagittis.
Nunc ornare massa libero, at dictum lorem facilisis vitae. Quisque tempor nisi et ultricies mattis. Phasellus sodales imperdiet urna vel fringilla. Sed enim lectus, auctor et est ut, mattis vehicula est. Duis finibus porta porta. In hac habitasse platea dictumst. Fusce nec eros faucibus felis facilisis dignissim. Quisque ac sapien commodo purus commodo volutpat. Nulla ipsum lorem, accumsan quis commodo id, porttitor in erat. Aenean viverra non diam eu auctor.</p>
<br/>
<p> fg </p>
<br/>
<p> gjf </p>
<br/>
<p> wehhweh </p>
</div>
<img src="2017.jpg" align="right">
</div>
</div>
</div>
</body>
</html>