When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Having an issue with the following: I hope you can help me identify my problem here and I'm not sure why it's occurring. https://i.sstatic.net/C7VzU.png I believe the problem lies in the header and nav sections I initially thought it might be related to the images, but I'm certain it's not due to the logo sizes being 24px each. Apologies if my English is poor.

<header>
  <nav>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2">
          <div class="logo">
            <a href="https://www.samsung.com/us/" target="_blank">
              <img
                src="../src/assets/img/gnb-desktop-120x32.png"
                alt="Samsung"
              />
            </a>
          </div>
        </div>
        <div class="col-9">
          <div class="navlist">
            <ul class="inner">
              <li>
                <button><span>Shop</span></button>
              </li>
              <li>
                <button><span>Mobile</span></button>
              </li>
              <li>
                <button><span>TV & Audio</span></button>
              </li>
              <li>
                <button><span>Appliances</span></button>
              </li>
              <li>
                <button><span>Computing</span></button>
              </li>
              <li>
                <button><span>Displays</span></button>
              </li>
              <li>
                <button><span>Accessories</span></button>
              </li>
              <li>
                <button><span>SmartThings</span></button>
              </li>
            </ul>
            <ul class="inner">
              <li>
                <button><span>Explore</span></button>
              </li>
              <li>
                <button><span>Support</span></button>
              </li>
              <li>
                <button><span>For Business</span></button>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-1">
          <ul class="tools">
            <li>
              <button>
                <span>
                  (search icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (shopping icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (user icon)
                </span>
              </button>
            </li>
            <li class="d-none">
              <button>
                <span>
                  (bars icon)
                </span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

Answer №1

After some troubleshooting, I was able to identify the issue. It turns out that I had made a change to the value of the bootstrap container-fluid class. Once I commented it out, the problem was resolved!

Big thanks to everyone who helped!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

Having trouble making setTimeout work with a nested function in it

I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...

Using jQuery UI to create a bouncing effect on a CSS sprite image

Want to give your social icons a bounce effect using jQuery UI Bounce? I'm following a template and some jQuery documentation, but having trouble getting it right. It seems like the sprite image for the icons might be causing the issue. Can someone h ...

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

Using Node JS and Express to deliver a static HTML page with an embedded image

I have successfully set up a system where I can serve static HTML pages using express. I have also installed "ejs" to render the page with data from local variables in my .js file. The only issue I am facing is displaying a small logo in the corner of the ...

Steps for activating all iframes on an HTML page

Seeking a solution to enable all iframes on my webpage without encountering the 'refused to connect' error. Is it feasible with the implementation of a meta tag? If yes, could someone provide a code snippet for reference? ...

Applying Border Radius to JavaFX Components for a Unique Background Effect

When I apply the CSS properties -fx-border-radius and -fx-border-width to a basic GridPane, the background in the corner does not get "cut off". The following is the CSS code being used: .payload { -fx-hgap: 20px; -fx-padding: 40px; -fx-back ...

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

Tips for applying a CSS wrapper to an element, not just text

I am working with a group of span elements within a td that has a set width. My goal is to wrap the span elements onto new lines without breaking up the text inside them. For example, if I have: <td> <span>bind</span> <span&g ...

Message form with HTML and PHP

Currently, I am developing an HTML form that utilizes PHP to send an email message. While testing in MAMP, I am encountering an issue where I am not receiving a response after clicking on the "send message" button. Any suggestions or guidance on how to res ...

What is a way to adjust the width of fixed columns in a Bootstrap 4.0 responsive table?

I've been struggling to make this work despite following similar questions and answers. I attempted to adjust the column width by directly setting each one, but nothing seems to change! <thead style="white-space: nowrap"> ...

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

The Bootstrap div is struggling to maintain its width on smaller screens

My attempt to create 3 inputs with the following code: <div class="col-sm-5 col-md-6"> <form> <div class="form-row"> <div class="col-0.5 search-label"> <label class="control-label">Search :</lab ...

Place the application bar at the bottom of the screen

I am working on a project aimed at monitoring employees, and I have developed a user interface that allows for modifications within the site. However, there is an issue with the "bottom App Bar" section at the bottom of this interface which has a blue back ...

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

Is it possible to adjust the button's position based on the location of the cursor?

I am just starting to learn JavaScript, so I am not yet familiar with all the commands involved. I have a code that includes a button which scrolls back to the top of the page, but I was wondering if there is a way to change the position of that button bas ...

What changes can be made to the HTML structure to ensure that two form tags function separately?

Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...

Blackberry - Printing HTML String within a text box

My question involves dealing with HTML Strings such as <p>something</p> etc... some other html string etc... <p>something</p> I want to display this formatted string in a field. For Android, I use a WebView... For iPhone, a UIWe ...