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:

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:

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

Adjust the height of the Iframe to match the content within it

Discovering the method for retrieving JavaScript output in Selenium

Programmatically setting focus in Ionic

Issue with Bootstrap checkbox buttons not rendering properly

Styling the navigation bar using CSS and positioning a <div> element underneath

Creating a platform where your choices determine the results is my goal for a new website

Incorporating Dynamic Javascript: A Step-by-Step Guide

Extracting text using Python and Selenium

What is the best way to include CSS in a CodeIgniter project?

What are the methods to ascertain whether an HTML element possesses a pseudo element?

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Image expansion

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Unlocking the potential of resizable bootstrap table columns in React

Utilizing React JS Styled-Components to Import Images from the Public Directory

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

CSS form not aligning properly within wrapper div and appears to be floating outside of it

Error occurred during the file watch process in PhpStorm after saving the CSSO file

error in URI (not a valid URI):