-1

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;  
}
Eman Alshehri
  • 9
  • 1
  • 6
  • 6
    Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Carl Binalla Dec 12 '18 at 09:03
  • By far the simplest solution IMO is to use bootstrap. https://getbootstrap.com – AwesomeGuy Dec 12 '18 at 09:11
  • The question is, what do you want it to look like on the various screens? Do you have a layout in mind? – Mr Lister Dec 12 '18 at 09:24

3 Answers3

3

2 methods:

  1. Use % and not px

  2. Use @media rules in your css: 

    @media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
Ced
  • 1,293
  • 5
  • 23
  • 34
Ste
  • 66
  • 4
0

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 :)

Martijn
  • 15,791
  • 4
  • 36
  • 68
0

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.

Kektuto
  • 142
  • 12