Minimizing Unused Space After Media Query Adjustment

Using the bootstrap grid system, I am facing some uncertainties.

I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above.

In my current setup: https://jsfiddle.net/v529b4mz/1/, everything seems to be working fine. However, there are two issues:

  • When the screen size is 1920px, there are white margins around the content which decrease as the screen is resized. At a certain point, the media queries change causing more white space around the elements again. I'd like to reduce the space when the media queries change so the content can expand accordingly.

Is there a way to achieve this?

For instance, how can I set a green background for the menu in all media queries except for extra small screens where I want to hide it and display a mobile-friendly version without drastically reducing the font size or padding of list items? Instead, utilizing the surrounding white space to ensure legibility up to the small media query breakpoint.

Also, why are there margins between the list elements?

Note: The header and section elements are used to provide a full-width background color for the bootstrap containers.

HTML:

<header style=background:yellow;>
  <div class="container">
    <div class="row">
      <div class="col-2" style="background-color: orange">
        Logo
      </div>
      <div class="col-10 d-flex justify-content-end" style="background-color: pink; ">
        Links
      </div>
    </div>
  </div>
</header>

<section style="background:pink;">
  <div class="container">
    <div class="row" style="background-color: green">
      <div class="col-12">
        <ul>
          <li><a href="">Item1</a></li>
          <li><a href="">Item2</a></li>
          <li><a href="">Item3</a></li>
          <li><a href="">Item4</a></li>
          <li><a href="">Item5</a></li>
          <li><a href="">Item6</a></li>
          <li><a href="">Item7</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS:

*{
  box-sizing:border-box;
}
ul{
  display: flex; 
  align-items: center; 
  list-style:none;
  justify-content:space-between;
}
ul li{
  padding:20px;
  border:1px solid gray;

}

Answer №1

Utilizing the .container class establishes a grid with a fixed width between two specified breakpoints.
Consider replacing it with .container-fluid, which offers a more flexible and fluid layout :)
Just remember, you may need to manually adjust padding on the parent section element; this can be done using fixed measurements in rem, em, or px, relative to viewport width using the vw unit (where 100vw equals the viewport width), or a combination of these based on screen resolution.


For detailed information, check out the documentation here (Bootstrap 4.0 as shown in your fiddle).

The container classes help in centering a website's content. Choose .container for fixed width or .container-fluid for full width.


Check out the Updated Fiddle here

<section style="background:pink;">
  <div class="container-fuild">
    <div class="row" style="background-color: green">
      <div class="col-12">
        <ul>
          <li><a href="">Item1</a></li>
          <li><a href="">Item2</a></li>
          <li><a href="">Item3</a></li>
          <li><a href="">Item4</a></li>
          <li><a href="">Item5</a></li>
          <li><a href="">Item6</a></li>
          <li><a href="">Item7</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

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

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...

Ways to create a flexbox that can scroll and includes two divs that fill the entire screen

I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...

Should header and footer be incorporated as part of a template design?

Is it considered advisable to include tags such as etc from another page? For example: <?php include_once("header.php")?> Content specific to each individual page <?php include_once("footer.php")?> The header.php file includes: <!DOCTYP ...

Would adjusting the font sizes of headings be crossing into grey or black hat SEO territory?

Here's the scenario: In this case, the page title is designated as H3, the article title is labeled as H2, and a certain keyword or important sentence is identified as H1 within the content. These elements have custom CSS classes applied to them, cau ...

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

I'm attempting to utilize the JQuery plugin, hcSticky, in order to achieve a scrolling effect on my fixed content. However, I seem to be encountering some difficulty getting it to function properly. What could I possibly be doing incorrectly? JSFIDDL ...

The pattern() and onkeyup() functions are unable to function simultaneously

When trying to display a certain password pattern using regex while typing in the fields, I encountered a problem. The onkeyup() function works for checking if both passwords match, but it causes the pattern info box not to appear anymore. I'm curiou ...

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

Showing no background color until the user lifts their finger

I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

Issue with JQuery: Logo only becomes visible after scrolling

Recently, I added a jQuery script to modify the header as we scroll on our website. Everything is functioning smoothly except for one issue - the large logo on the left side doesn't appear when visitors first land on the page; it only shows up after t ...

Arranging form elements and a map in a side-by-side layout using HTML5

How can I align the contents of a map and a form side by side with responsive design? I've attempted using tables and lists, but the form keeps appearing on top of the map. Ideally, I want the contents to be displayed side by side on wider screens and ...

Struggles with CSS hover effects on text and buttons

Beginner in the world of HTML & CSS Struggling with the following: Hover Effect: Looking to implement a hover effect where hovering over either the staff name text or the circle button above it triggers the appearance of a square border (refer to 'A ...

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

Establishing a primary color for all text in Vuetify

How can I set a base color for all text in a Vue + Vuetify project? I attempted to change the theme's primary color in vuetify.ts: export default new Vuetify({ theme: { themes: { light: { primary: "#E53935", }, }, }, } ...

Storing the closed state of a pop-up box in localStorage for future reference

I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...