Thiết kế website giá rẻ

Question

I have a bootstrap navbar and have placed a coloured div above it. Both of these are set to width:100%.

However, when I test the page at different screen widths, the navbar and div will fall below 100% width when

screen width <887px and >720px
screen width < 464px

I can’t figure out why this happens at these particular widths.

I had a similar issue with a different container, and was able to fix it by using media queries to set the width to 100% at particular widths, but that’s not working here.

That is, code like what’s below isn’t working.

@media screen and (min-width: 720px) and (max-width: 887px) {   
 display: grid;
    width:100%;}
     
;

I’ve also tried using multiple media queries to set the width in pixels. Code similar to what’s below doesn’t work.

@media screen and (max-width: 887px) {
    display: grid;
    width:887px;}


@media screen and (max-width: 886px) {
    display: grid;
    width:886px;}


@media screen and (max-width: 885px) {
    display: grid;
    width:885px;}


@media screen and (max-width: 884px) {
    display: grid;
    width:884px;}

Does anyone know why my navbar and div isn’t always occupying 100% of the screen width?

This is the code for it.

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import Example from './Modal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/free-solid-svg-icons';
import { useGlobals } from '../../Globals';
import "./BNavbar.css";
import logo from "../../images/MJNNavbarlogo.png";
import styled from 'styled-components';


const Parent = styled.div`
width:100vw;


@media screen and (max-width: 887px) {
    display: grid;
    width:100%;}

    @media screen and (max-width: 464px) {
    display: grid;
    width:100%;}
`;


const Banner = styled.div`
display:grid;

  height: 80px;
  width: 100%;
  width:100vw;

  background: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
@media screen and (max-width: 887px) {
    display: grid;
    width:100%;}


    @media screen and (max-width: 464px) {
    display: grid;
    width:100%;}
 
`;


const StickyNavbar = () => {
    const { PrimaryColour, GlobalFont } = useGlobals();
 
    useEffect(() => {
      // Set the CSS variable for primary color
      document.documentElement.style.setProperty('--primary-color', PrimaryColour);
      // Set the CSS variable for global font
      document.documentElement.style.setProperty('--global-font', GlobalFont);
    }, [PrimaryColour, GlobalFont]);
 
    // Navbar style with sticky positioning
    const navbarStyle = {
      backgroundColor: PrimaryColour,
      height: "80px",
      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
      position: 'sticky', // Sticky positioning
      top: "0", // Stick at the top (0)
      width: '100%',
      zIndex: 1000, // High z-index to be on top of other elements
      alignItems: "center",
    };
 
    return (
      <Parent>
        <Banner />
        <nav className="navbar navbar-expand-lg" style={navbarStyle}>
          <Link className="navbar-brand" to="/">
            <img src={logo} alt="Logo" />
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse custom-navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item active">
                <Link className="nav-link" to="/">Home</Link>
              </li>
              <li className="nav-item dropdown">
                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Services
                </a>
                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li>
                    <Link className="dropdown-item" to="/services" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Services
                    </Link>
                  </li>
                  <li>
                    <Link className="dropdown-item" to="/services/development" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Development
                    </Link>
                  </li>
                  <li>
                    <hr className="dropdown-divider" />
                  </li>
                  <li>
                    <Link className="dropdown-item" to="/services/support" style={{ fontFamily: 'Roboto, sans-serif' }}>
                      Support
                    </Link>
                  </li>
                </ul>
              </li>
              <li className="nav-item d-flex align-items-center custom-phone-number" style={{ marginLeft: "25px" }}>
                <FontAwesomeIcon icon={faPhone} className="me-2" />
                <a href="tel:0412123456" className="nav-link phone-number">
                  0412 123 456
                </a>
              </li>
              <li className="nav-item active" style={{ marginLeft: "25px" }}>
                <Example buttonText="Contact Us" />
              </li>
            </ul>
          </div>
        </nav>
      </Parent>
    );
  };
 
  export default StickyNavbar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

EDIT:
The width in the elements stays at 100% when I adjust the screen size.

This is what appears when I inspect the element for width = 886px:

    element.style {
}
<style>
@media screen and (max-width: 887px) {
    .gMPedu {
        display: grid;
        width: 100%;
    }
}
<style>
.gMPedu {
    width: 100%;
}
* {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
body {
    font-family: 'Roboto', sans-serif;
}
body {
    font-family: var(--global-font);
}
body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
style attribute {
    --primary-color: hsla(200, 86%, 40%, 1);
    --global-font: roboto;
}
:root {
    --global-font: 'Roboto', sans-serif;
}
:root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
}
:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
Show all properties (66 more)
}
:root {
    --primary-color: #ff0000;
    --global-font: 'Roboto', sans-serif;
}
<style>
:root, :host {
    --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
    --fa-font-regular: normal 400 1em / 1 "Font Awesome 6 Free";
    --fa-font-light: normal 300 1em / 1 "Font Awesome 6 Pro";
    --fa-font-thin: normal 100 1em / 1 "Font Awesome 6 Pro";
    --fa-font-duotone: normal 900 1em / 1 "Font Awesome 6 Duotone";
    --fa-font-brands: normal 400 1em / 1 "Font Awesome 6 Brands";
    --fa-font-sharp-solid: normal 900 1em / 1 "Font Awesome 6 Sharp";
    --fa-font-sharp-regular: normal 400 1em / 1 "Font Awesome 6 Sharp";
    --fa-font-sharp-light: normal 300 1em / 1 "Font Awesome 6 Sharp";
    --fa-font-sharp-thin: normal 100 1em / 1 "Font Awesome 6 Sharp";
    --fa-font-sharp-duotone-solid: normal 900 1em / 1 "Font Awesome 6 Sharp Duotone";
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}

Thiết kế website giá rẻ

Danh mục

Why does my container shrink to <100% width at random points?