How to make my page responsive to any screen size?
Question
please find my code below: I need to make it responsive to all screen's sizes? how ? Note: I repeated the same text and links to have the same number of info to be shown which I'm looking for. The first code is the html and the second one is the CSS. Really need help on that because it looks not nice to have different format on different screen's sizes. Thanks in advance and lease ask me if the code is not clear to you or need more clarifications:
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="Header">
<div id="object1"><a href="index.html"><img src="Images/Capture logo.PNG"
width="230" height="100" alt=""/></a></div>
<div id="object2">
<p class="text1">test</p>
</div></div>
<div class="watermarked"> <hr size="20"; color="#140098"</hr>
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td width="50%"> <p class="ltrh" >test</p></td>
<td width="50%"><p class="rtlh">test</p></td>
</tr>
</tbody>
</table >
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >PR Approval:</p>
</a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a>
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a>
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a>
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a>
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css code:
@charset "utf-8";
/* CSS Document */
#object1{
width:auto;
float: left;
}
#object2{
width:auto;
float: right;
align-content: center
}
p.text1{
color: #464646;
font-size: 25pt;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
p.rtlh {
direction: rtl;
font-size: 22pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltrh{
font-size: 21pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltr{
font-size: 18pt;
color: mediumblue;
margin-left:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
p.rtl{
direction: rtl;
font-size: 18pt;
color: mediumblue;
margin-right:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
.Header {
height: 100px;
}
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(Images/blue.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
3 answers
solution1
3 2018-12-12 09:10:14
2 methods:
Use % and not px
Use @media rules in your css:
@media only screen and (max-width: 600px) { body { background-color: lightblue; } }
solution2
0 2018-12-12 09:05:33
A simple trick I like to use:
#page{
width: 96%;
max-width: 1200px;
margin: 0 auto;
}
On a desktop, or another large device, it'll be 1200px wide. When you go smaller than that, it'll be 96% of the width of the screen. You can make that 100%, but I personally prefer to have a very small gap between the content and the edge of the screen, especially for phone like the Edge series of Samsung. It also gives a little canvas the user can use to scroll the page.
And in my experience float makes responsive design a lot more difficult. I suggest display: inline-block; and learning how to properly use that in combination with block elements :)
solution3
0 2018-12-12 10:58:26
To View a Webpage on different devices, you have to add this code below to your Header. (the code is for HTML5)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport is the user's visible area of a web page it will be smaller on a mobile phone than on a computer screen. The "width=device-width" sets the width of the webpage to the width of the device. The initial scale is the zoom level when the webpage first get called.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.