-3

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>

EDIT

PLEASE ADVISE IF CSS CODE IS NEEDED, thanks again.

EDIT 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

  • Is there a link to the website? in order to preview the problem – DohaHelmy Jan 14 '20 at 21:03
  • Yes, thank you! http://patricesprojects.info/atlanta/index.html –  Jan 14 '20 at 21:09
  • media queries are the solution. target some breakpoints and include your fix styles https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp – DohaHelmy Jan 14 '20 at 21:36
  • 1
    Thank you, I'm looking over this now. –  Jan 14 '20 at 21:43
  • Hi, I checked out the media queries & tried them in my CSS but I didn't see much of a difference. Would you happen to have any other suggestions? –  Jan 15 '20 at 23:57
  • media queries are the solution. but first cosider cropping all empty spaces in your logo then reuse it without `position: absolute`. after that using media queres change font sizes and rearnge your links vertically for mobile – DohaHelmy Jan 16 '20 at 07:31

3 Answers3

1

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

  • css code has many incorrect syntax

  • header image is contained unproperly. remove padding and add height: 70vh; to #about-us

  • add for example padding: 0px 20px to h1 to add some white space on the sides of headings

  • remove all paddings in ul by setting it to 0 to remove extra left space included by default.

  • give the footer text-align: center; to center its content.

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.

DohaHelmy
  • 770
  • 1
  • 7
  • 19
  • 1
    Thank you so much! I'm still trying to understand media queries thank you for the information. –  Jan 16 '20 at 15:36
0

You're using large sizes throughout the page, such as img elements being set to width: 40em, or #about-us using padding: 20em.

The default size of an em unit is 16px, so those elements are being set to at least 640px wide, which is stretching out your page for devices that render smaller than that.

Try to avoid using large hardcoded sizes where possible if you want your site to be able to scale down. For example, with images, you could go with something more flexible like this:

img {
  max-width: 40em;
  width: 100%;
}
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Thank you, I tried to play around with the img tag. I tried max-width as well but my images weren't centered. –  Jan 14 '20 at 21:45
  • @patrice123 Center images with `text-align: center` on their parent elements. Or, if the image is `display: block`, then use `margin: 0 auto`. – Jon Uleis Jan 15 '20 at 04:07
  • Thank you! Would you happen to know what I could use for the navbar, footer & text? I've been trying to play around with it but I can't figure it out. When my site is resized on my desktop the navbar titles & logo overlap. The background image and the section under the background image is cutoff. The text also moves to the left, instead of the center. I tried to add Media Queries as well but it didn't work. –  Jan 15 '20 at 14:55
-1

Not sure what was the reason for using position: absolute; here. Generally it's not a good practice to do so (at least in that case). You can position the all elements with flex. Also, giving width: 40rem; for the logo causing you most of the issue because it's trying to maintain its width on every screen size.

So, for the logo you can do something like that -

#header-img {
max-width: 220px;
width: 100%;

And clear all the positioning and use flex only -

    header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    background-color: #ffaa63;
    color: white;
    font-family: 'Pacifico', serif;
    padding: 1.5em;
    max-width: 100%;
    box-shadow: 0px 10px 20px grey;
    height: auto;
}
#logo span {
     /* position: relative; */
    /* left: 150px; */
    text-shadow: 2px 2px 4px #000000;
}
#nav-bar ul {

    /* position: relative; */
    /* right: 75px; */
    list-style-type: none;
}
#nav-bar ul li {
    /* float: left; */
    margin: 0px 15px;
    color: #fff;
    text-shadow: 2px 2px 4px #f2f2f2;
}
Or Ben-Yossef
  • 399
  • 2
  • 17
  • Thank you, I just entered your code and the navbar titles & logo still overlap. The background image and the section under the background image is cutoff. The text also moves to the left, instead of the center. I've been trying to play around with the CSS to try to figure this out. I tried to add Media Queries as well but it didn't work. –  Jan 15 '20 at 15:10