htmlcssmeta-tags

Website not scaling correctly when resizing browser & mobile phone

My website isn't scaling correctly when I try to resize it or view it on my phone. I've added the below META tags but it's not working. Please advise, thank you.

http://patricesprojects.info/atlanta/index.html

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   

   <link rel="stylesheet" href="atlanta.css">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Pacifico">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto">
 </head>
<body>
  <header id="header">
   <div id="logo">
      <img src="logohtml.png" alt="logo" id="header-img">
   <span>Welcome to Atlanta!</span>
   </div>
  
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#"><b>Things to Do</b></a></li>
      <li><a class="nav-link" href="#"><b>Where to Eat</b></a></li>
      <li><a class="nav-link" href="#"><b>Events</b></a></li>
      <li><a class="nav-link" href="#"><b>Hotels</b></a></li>
      <li><a class="nav-link" href="#"><b>Parking</b></a></li>
     </ul>
  </nav>
</header>
</header>

This is what the site looks like after updating it. The first image is what it looked like prior to the update.

enter image description here

enter image description here

Solution

  • Those are my notes and suggestions you could make to improve your website.

    Also all <img> is overflowing on small devices/widths and it could be contained and responsive by adding the following styles.

    img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
}

    And for the navigation bar

    First your logo image should be cropped to remove all empty spaces around it. which will let you increase its size with no major effect in the height of the nav and without using position: absolute. notice the difference in two images below:

    enter image description here enter image description here

    you should use media queries to make it repsonsive to devices based on some breakpoints. read the following links about them

    Here is a working exmaple for your navigation bar https://codepen.io/DohaHelmy/pen/xxbzzRN

    It uses a mobile-first approach and it. Try to understand how it is made if you need to make it Desktop first. In addition Read this guide on flexbox to understand how to align and justify content using flex which is used in the example.