How can i make my html code fit to all display sizes?-CodePudding

So I am making a website and it is not aligning to all screens well. I made it on a chrome book and this is the website https://amazoon.w3spaces.com This is my code.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href='index.html'style="position:fixed ; bottom:700px; width:40px;">
    <button><img href='new
      .html'src=
"logoforamazoon.png"         alt="GeeksforGeeks logo" 
         align="left"
                 width= 150px height=70px></button></a>
    
  
   
  
    <img src="hqdefault.jpg"
         style="position:fixed; right:1239px; bottom:250px; width:200px; height:200px; border:solid;"/>
    <a style="position:fixed; right:1265px; bottom:190px; width:150px; height:70px; border:
              ;"/><h4>$2.99, SUPER IDOL</h4>
    <a href='SuperIdol.html'style="position:fixed; right:1390px; bottom:190px; width:50px;"><button style="height:30px;width:200px">SUPER IDOL PURCHASE</button></a>
    <img src="zmsjpcc3j9n51.jpg"
         style="position:fixed; right:979px; bottom:250px; width:200px; height:200px; border:solid;"/>
    <a style="position:fixed; right:1015px; bottom:194px;"><h4>$6.49, AMONGUS</h4></a>
    <a href='amongus.html'style="position:fixed; right:1130px; bottom:190px; width:50px;"><button style="height:30px;width:200px">AMONGUS SUS PURCHASE</button></a>
    <img src="EkZnsJKWoAILKXP.jpeg"
         style="position:fixed; right:719px; bottom:250px; width:200px; height:200px; border:solid;"/>
    <a style="position:fixed; right:745px; bottom:194px;"><h4>$699696.69 Cookies</h4></a>
    <a href='grannyscookies.html'style="position:fixed; right:870px; bottom:190px; width:50px;"><button style="height:30px;width:200px">Gannys Cookies Purchase</button></a>
    <img src="Minecraft.jpeg"
         style="position:fixed; right:459px; bottom:250px; width:200px; height:200px; border:solid;"/>
    <a style="position:fixed; right:501px; bottom:194px;"><h4>$5469 Minecraft</h4></a>
    <a href='Minecraft.html'style="position:fixed; right:609px; bottom:190px; width:50px;"><button style="height:30px;width:200px">Minecraft Purchase</button></a>
  </body>
</html>

Please help me with this.

CodePudding user response：

You're using a lot of tags with hard-coded instructions where (i.e., how many pixels from the edges) you want to place items. That gives you a lot of control over the look of the page on the screen size that you had in mind when you designed this, but it will look very different on differently sized screens. If you do it without those hard-coded position tags, it should adjust to different screen sizes more flexibly.

CodePudding user response：

use media queries with css (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)