Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

Question

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

My website is not adapting properly to different screen sizes, even after I have added the META tags below. Any advice would be appreciated. Thank you.

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 let me know if CSS code is necessary. Thanks once again.

UPDATE: This is how the site appears now after the changes. The first image shows the previous look. enter image description here enter image description here

html css meta

Answer 1

Answer №1

Here are some suggestions to enhance the functionality of your website:

The CSS code contains numerous syntax errors.
The header image is improperly contained. Remove padding and add height: 70vh; to #about-us.
Add, for example, padding: 0px 20px to h1 to introduce white space around headings.
Eliminate all padding in ul by setting it to 0 to eliminate unnecessary left spacing by default.
Center the content of the footer by giving it text-align: center;.

All <img> elements overflow on smaller devices or widths. To address this, consider adding the following styles to make them responsive:

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

Improvements for the navigation bar

First, crop your logo image to remove any excess whitespace around it. This will allow you to increase its size without affecting the height of the nav bar significantly or using position: absolute. Compare the difference between two images below:

https://i.sstatic.net/OIV7J.png https://i.sstatic.net/6iPdG.png

Use media queries to ensure responsiveness across various devices based on specific breakpoints. Explore the following links for more information:

How TO - Typical Device Breakpoints
CSS Media Queries
Media Queries: How to target desktop, tablet and mobile?
Using media queries

Check out a working example for your navigation bar here: https://codepen.io/DohaHelmy/pen/xxbzzRN

This example follows a mobile-first approach and emphasizes understanding how it functions. If needed, learn about aligning and justifying content using flex, which is utilized in the example, with this guide on flexbox.

Answer 2

Here are some suggestions to enhance the functionality of your website:

The CSS code contains numerous syntax errors.
The header image is improperly contained. Remove padding and add height: 70vh; to #about-us.
Add, for example, padding: 0px 20px to h1 to introduce white space around headings.
Eliminate all padding in ul by setting it to 0 to eliminate unnecessary left spacing by default.
Center the content of the footer by giving it text-align: center;.

All <img> elements overflow on smaller devices or widths. To address this, consider adding the following styles to make them responsive:

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

Improvements for the navigation bar

First, crop your logo image to remove any excess whitespace around it. This will allow you to increase its size without affecting the height of the nav bar significantly or using position: absolute. Compare the difference between two images below:

https://i.sstatic.net/OIV7J.png https://i.sstatic.net/6iPdG.png

Use media queries to ensure responsiveness across various devices based on specific breakpoints. Explore the following links for more information:

How TO - Typical Device Breakpoints
CSS Media Queries
Media Queries: How to target desktop, tablet and mobile?
Using media queries

Check out a working example for your navigation bar here: https://codepen.io/DohaHelmy/pen/xxbzzRN

This example follows a mobile-first approach and emphasizes understanding how it functions. If needed, learn about aligning and justifying content using flex, which is utilized in the example, with this guide on flexbox.

Answer 3

Answer №2

Your web page is currently using large sizes for various elements, like setting img width to 40em or adding padding: 20em to #about-us.

Keep in mind that the default size for an em unit is 16px, so by setting these elements to 640px wide, you are stretching your page and making it less responsive on smaller devices.

To ensure better scalability, try to avoid fixed hardcoded sizes whenever possible. For images, consider using a more flexible approach, like this:

img {
  max-width: 40em;
  width: 100%;
}

Answer 4

Your web page is currently using large sizes for various elements, like setting img width to 40em or adding padding: 20em to #about-us.

Keep in mind that the default size for an em unit is 16px, so by setting these elements to 640px wide, you are stretching your page and making it less responsive on smaller devices.

To ensure better scalability, try to avoid fixed hardcoded sizes whenever possible. For images, consider using a more flexible approach, like this:

img {
  max-width: 40em;
  width: 100%;
}

Answer 5

Answer №3

Uncertain why position: absolute; was used in this instance. It's generally not recommended (at least in this case). You can align all elements using flex instead. Additionally, setting width: 40rem; for the logo may be causing most of the issues as it tries to maintain its width on every screen size.

To address the logo, you can try something like this -

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

Remove all positioning and utilize flex exclusively -

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

Answer 6

Uncertain why position: absolute; was used in this instance. It's generally not recommended (at least in this case). You can align all elements using flex instead. Additionally, setting width: 40rem; for the logo may be causing most of the issues as it tries to maintain its width on every screen size.

To address the logo, you can try something like this -

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

Remove all positioning and utilize flex exclusively -

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

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

Answer №1

Here are some suggestions to enhance the functionality of your website:

Improvements for the navigation bar

Answer №2

Answer №3

Similar questions

Mastering the art of sorting HTML tables with various columns using JavaScript and jQuery

Managing errors in jQuery's .ajax function

What is the best way to ensure that an input group expands to fill the entire horizontal space

HTML Automated Email

Reset the queue for the slideDown animation using jQuery

Modify the position of the CSS background for the Y-axis using jQuery

Sometimes, JQuery struggles to set input values accurately

Sending numerous parameters in a form

inserting picture within the code

What is the process for changing the output paper size to A4 in React Native (expo android)?

Clicking on a button will allow me to select only a portion of text within a specific cell of

The background image does not appear on the animated div until the browser window is resized

Refresh tab URLs for dynamic tabs with jQuery UI

Change the color of the text in a shiny dashboard

What is the recommended way to select a checkbox using JQuery?

Accessing Facebook through Login with only a button visible

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

Tips for adding extra spacing between icon and text field using Vuetify

Replacing the yellow autofill background

What is the best way to keep a checkbox unchecked after clicking cancel?