Learning HTML and CSS - problems with background, positioning of items and view on mobile-CodePudding

I have started trying to code my first website after learning for about 2 days.. and have run into some problems (inevitably):

When viewing the page from a phone, everything gets moved way out of position
I can see the home screen absolutely fine on the live server but after importing the files to host the website, the background isn't coming up
When zooming in/out of the page elements move around

Any help or advice would be appreciated, thank you in advance!

The website in question where I have uploaded the home page is: http://btbco.co.uk/

What I've coded in the index.html and styles.css files (in Visual Studio Code) is copied below:

(Please bare in mind I am very much as beginner as you can get and my terminology and knowledge will be very limited)

html {
  margin: 0;
  padding: 0;
  height: 100%;
}
img.logo {
  max-width: 31rem;
  position: absolute;
  left: 85rem;
  margin: 0 auto;
}
h1.hometitle {
  color: rgba(255, 0, 0, 0);
}

footer {
  color: white;
  position: absolute;
  bottom: 0%;
  width: 99%;
  text-align: center;
  background: black;
  margin: 0 auto;
}

ul.home-list {
  list-style: none;
  position: absolute;
  top: 21rem;
  left: 88rem;
  color: white;
  width: 25rem;
}

li.homenav {
  color: #ffbd59;
  font-size: 3rem;
  text-decoration: underline;
  text-decoration-color: #000000;
  background-color: black;
  border: groove;
  padding-top: 0.1px;
  max-width: 25rem;
  position: static;
}

body {
  background-image: url(/Images/Home\ page.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/Images/Browser logo.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="robots" content="index,follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0," />
    <meta
      name="keywords"
      content="burgers, beef burgers, halal, halal burgers, food, halal food"
    />
    <meta
      name="description"
      content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties."
    />
    <link rel="stylesheet" href="styles.css">
    <title>Bun The Burger | The new home of fresh juicy beef burgers</title>
      </head>
  <div > 
  
  </div>
    <h1 >
      <em>Bun The Burger &copy;</em>
    </h1>
    <!-- Logo-->
    <a href="http://buntheburger.co.uk">
      <img  src="images/LOGO.png" alt="Bun The Burgers Logo" />
    </a>
    <!--Navigation Menu-->
    <div > <nav> 
      
        <ul >
          <a href="http://menu.buntheburger.co.uk"><li >Menu</li></a>
          <a href="http://order.buntheburger.co.uk"><li >Order</li></a>
          <a href="http://aboutus.buntheburger.co.uk"><li >About Us</li></a>
          <a href="http://testimonials.buntheburger.co.uk"><li >Testimonials</li></a>
          <a href="http://contactus.buntheburger.co.uk"> <li >Contact Us</li></a>
        
    </nav>
  </div>
    <!--Footer-->
    <footer>
      <p>   2022 Bun The Burger © &#x2013; All Rights Reserved</p>
      <p> Home &#8226; Menu &#8226; Order &#8226; About Us &#8226; Contact Us &#8226; Privacy Policy &#8226; Terms and Conditions</p>
    </footer>
  </body>
</html>

CodePudding user response：

I adjusted your background-positioning and also, the biggest thing I would suggest when trying to make your site responsive is to stay away from absolute positioning as much as possible. For example, on your ul and logo you have left: 88rem. 88rem is going to be different on all media devices so on mobile devices (smaller screens) it will be completely out of the screen and will cause overflow on the x-axis. I removed that absolute positioning and added a container so that I could use a flexbox on your content. Your content is now responsive without any x-axis overflow. I also adjusted your footer so it was 100 % width of all devices.

Also, you had a few errors which will cause semantic issues later on. You don't have an opening body tag and you forgot to close your unordered list ul. Be sure to avoid these errors as much as possible in the future, cause they won't accurately affect the live front-end if they are present, which could cause CSS that is unnecessary. This should get you started on a responsive build, however.

Also, I suggest using a good IDE editor that formats your code properly, so these semantic errors can be greatly reduced. For a beginner, I would recommend VS code.

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

img.logo {
  max-width: 31rem;
  position: absolute;
  right: 0;
  margin: 0 auto;
}

h1.hometitle {
  color: rgba(255, 0, 0, 0);
}

footer {
  color: white;
  position: absolute;
  bottom: 0%;
  width: 100vw;
  text-align: center;
  background: black;
  margin: 0 auto;
}

ul.home-list {
  list-style: none;
  position: relative;
  color: white;
  width: 25rem;
}

li.homenav {
  color: #ffbd59;
  font-size: 3rem;
  text-decoration: underline;
  text-decoration-color: #000000;
  background-color: black;
  border: groove;
  padding-top: 0.1px;
  position: static;
}

body {
  background-image: url('https://dummyimage.com/1000/507c8c/fff');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

.container {
  display: flex;
  justify-content: right;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <link rel="icon" href="/Images/Browser logo.png" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="robots" content="index,follow" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0," />
      <meta name="keywords" content="burgers, beef burgers, halal, halal burgers, food, halal food" />
      <meta name="description" content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties." />
      <link rel="stylesheet" href="styles.css">
      <title>Bun The Burger | The new home of fresh juicy beef burgers</title>
   </head>
   <body>
      <div >
         <div >
            <!-- Logo-->
            <a href="http://buntheburger.co.uk">
            <img  src="images/LOGO.png" alt="Bun The Burgers Logo" />
            </a>
            <!--Navigation Menu-->
            <div >
               <nav>
                  <ul >
                     <a href="http://menu.buntheburger.co.uk">
                        <li >Menu</li>
                     </a>
                     <a href="http://order.buntheburger.co.uk">
                        <li >Order</li>
                     </a>
                     <a href="http://aboutus.buntheburger.co.uk">
                        <li >About Us</li>
                     </a>
                     <a href="http://testimonials.buntheburger.co.uk">
                        <li >Testimonials</li>
                     </a>
                     <a href="http://contactus.buntheburger.co.uk">
                        <li >Contact Us</li>
                     </a>
                  </ul>
               </nav>
            </div>
         </div>
         <h1 >
            <em>Bun The Burger &copy;</em>
         </h1>
      </div>
      <!--Footer-->
      <footer>
         <p> 2022 Bun The Burger © &#x2013; All Rights Reserved</p>
         <p> Home &#8226; Menu &#8226; Order &#8226; About Us &#8226; Contact Us &#8226; Privacy Policy &#8226; Terms and Conditions</p>
      </footer>
   </body>
</html>