How to make my page responsive to any screen size?

responsive css code for all screen size
how to make responsive website using bootstrap
responsive design
responsive web design examples
screen sizes for responsive design
responsive web design examples with source code
responsive design principles
responsive div css

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;  
}

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;
        }
    }

    Responsive Web Design Basics | Web Fundamentals, Why should we create a custom Web design for each group of users; after all, upon page load), we must consider the hundreds of different screen sizes. For any screen that is wider than 480 pixels, the larger-resolution  In this example, the code dictates that your website's page will take 100% of the window, regardless of the viewing screen's size. If you'd like your page to appear slightly smaller, we recommend setting your width to no less than 80%, or you risk that your content will appear too small on-screen.


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

    How to make my page responsive to any screen size?, The web is accessible on a huge range of devices, from small-screen phones to big-screen televisions. IA) and structure of the page,; Adding design elements to make it responsive Content is the most important aspect of any site. <meta name="viewport" content="width=device-width, initial-scale=1"> To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen.


    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.

    Responsive Web Design, A website is responsive if it is able to adapt to the screen of the client. layout, I add media queries and slight changes to my CSS to create a responsive site. This will set the view on all screens at a 1×1 aspect ratio and remove the default By having a look at the code, you can see that I defined two sizes: The first have  When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style. Use percentage instead of pixels, it will make your work easier.


    Your First Multi-Device Site | Web Fundamentals, to see the whole page results in a poor user experience. The Content is not sized correctly for the viewport Lighthouse A common way to deal with this problem is to give all images a max-width of 100% . Since screen dimensions and width in CSS pixels vary  Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client. The CSS3 specification included a new unit named rems .


    How To Make a Responsive Website [Best Practices 2020], A website is responsive if it is able to adapt to the screen. website, or making responsive an existing site, the first element to look at is the layout. This will set the view on all screens at a 1×1 aspect ratio and remove the default By having a look at the code, you can see that I defined two sizes: The first  Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window. Dock app bars to the bottom of the window for improved reachability. Use one column/region at a time. Use an icon to represent search (don't show a search box).


    Responsive web design basics, This usually means modifying their sites for the smaller screen size found on such In responsive design, we will present the same web page that desktop or laptop Any CSS enclosed within the curly brackets of that " @media screen and​  The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size