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. 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

Find the div element that wraps around the currently selected radio button

Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

Having trouble with Laravel 5.8 Bootstrap integration within JQuery?

i found a helpful resource at everything seems to be working well in the view, but i'm encountering issues when trying to implement it in JQuery. if anyone has suggestions on how to resolve this problem, please let me know. here is the PHP code for ...

Guide on hosting Google's Material Design Icon-Fonts on your personal server and incorporating them into your website

To access the Material Design Icon Fonts, it is advised to download them in various formats such as ttf, eot, woff, and woff2. These fonts can then be hosted on a server location and integrated into your CSS using the following code: @font-face { font- ...

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

Styling HTML elements using CSS within PHP echo statements

I am a beginner when it comes to PHP and I'm trying to figure out how to style this table. I tried creating a class, but changing the styles in a separate CSS file didn't work for me. Should I use style tags? How should I go about styling this? ...

How can I utilize JavaScript to retrieve the background color of a table cell upon clicking?

I am trying to create a function where an alert pops up displaying the background color of a table cell whenever it is clicked. Unfortunately, I am having trouble accessing and retrieving the background color value. The table cell in question is defined a ...

Which Express.js template allows direct usage of raw HTML code?

I am in search of a template that utilizes pure HTML without any alterations to the language, similar to Jade but keeping the HTML as is. The reason behind this inquiry is: I prefer the simplicity and clarity of HTML I would like to be able to easily vi ...

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

``How can I prevent browser popups/tooltips from appearing when a user exceeds the maximum value in a number

Is there a way to prevent the tooltip from appearing on the image when a user manually enters a quantity that exceeds the maximum allowed? The tooltip pops up when the form is submitted, and I need to find a way to turn it off. It seems like this tooltip ...

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

What is the best way to organize and position numerous images and text elements within a flex container?

Currently learning the ropes of web development and working on a practice project. My goal is to utilize flexbox in order to achieve a layout similar to this design. Here's what I have so far: .flex-container { display: flex; align-items: cente ...

A space designated for numerous receivers

Is there a way to create a field that contains other elements, similar to sending messages to multiple users in a social network? https://i.stack.imgur.com/P9e24.png I attempted to understand the code for this, but it's quite complex. If anyone could ...

Tips for locating a specific HTML element within a string

Trying to convert a website into a phonegap app is proving to be challenging for me. When I send a request to the server, it responds with the HTML content as text. My goal is to extract certain HTML elements from this text and then append them to a div in ...

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the ...

When using an `if` statement in CSS to determine if the value of `left` is

Is there a way to trigger an event only when the object reaches a specific percentage of its left position? I am trying to achieve this using jQuery with the .css() method. Here is what I have so far: HTML: <div id="midDiv"><img ..../></di ...