Troubleshooting problems with Bootstrap's media query designs

Forgive me for asking what may seem like a basic question, but I'm struggling to understand something,

I have been given design specifications with the following widths:

S- 320px M - 768px L - 992px XL - 1920px

However, the media queries being used are as follows:

@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)

I'm having trouble matching the designs to the appropriate media queries. Am I overlooking something very simple and obvious?

I apologize if that's the case!!

Thank you in advance,

cssbootstrap-4media-queries

Answer №1

If you're looking to enhance your CSS styling, I highly recommend using a CSS precompiler like Sass.

For more information on customizing Bootstrap themes, check out https://getbootstrap.com/docs/4.0/getting-started/theming/

To modify the configuration of your Bootstrap theme, you can override specific variables in the variables.scss file. Here are some key variables you might want to customize:

$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;
$screen-phone: $screen-xs-min !default;

$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-tablet: $screen-sm-min !default;

$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-desktop: $screen-md-min !default;

$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
$screen-lg-desktop: $screen-lg-min !default;

$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;

Answer №2

If you're looking to make your website responsive, utilizing tools like bootstrap can be very helpful. Based on the media queries you've specified, you can incorporate them into your CSS code like this:


# Add your general CSS styling here...

# Specific width CSS styling:
@media only screen and (min-width: 992px) {
  .class {
    color:#000
  }
}
@media only screen and (min-width: 1200px) {
  .class {
    color:#fff
  }
}

and so on

For instance, in this scenario, the .class will have a color of #000 for screens wider than 992px, and a color of #fff for screens wider than 1200px.

Since the 1200px query comes after the 992px query, it takes precedence over it.

You can also utilize max-width, like so:

@media only screen and (max-width: 768px) {
# Insert your CSS rules here
}

This approach is handy if you only want custom styling on smaller screens, which is common when designing for mobile devices.

You can also specify a range, such as:

@media only screen and (min-width: 1024px) and (max-width: 1150px) {
# Insert your CSS rules here
}

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

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

I have encountered an issue with two sibling sections. I applied position:absolute to the first section, but the second section is overlapping it. Even after trying to use position:relative on the second section, the problem persists. https://i.stack.imgur ...

htmlcss

Dropdown trigger changing image with AJAX

When a color is selected from one dropdown menu, it triggers a change in another dropdown menu and the image displayed. The ID for the dropdown affected by the color selection is "style_code". <script> function getState(val) { $.ajax({ ...

phphtmlcssnavigation

Tips for designing a fixed footer that remains visible at all times

I'm having trouble creating a sticky footer that stays visible regardless of how far the user scrolls on my page. I want it to look like the version on the left, but I'm getting something different on the right Here is the CSS I'm using: ...

htmlcss

section featuring a striking visual, user input form, and descriptive content

I want to create a layout with a background image in a div, a signup form on the right side, and a div containing h1 tags on the left side. Here is the HTML code: <html> <title> GoToMy PC </title> <head> <link rel="stylesheet" ...

htmlcss

What is the best method for incorporating dynamic page transitions when navigating between individual pages?

Let's say I have the following pages: red.html blue.html green.html My goal is to create links from red.html to blue.html and red.html to green.html. When attempting to use page anchors and iframes, I encountered an issue where scrolling from red.h ...

javascriptjqueryhtmlcssanimation

Angular onscroll event creating a parallax effect

I attempted to create a parallax effect using Angular and the OnScroll event, however, while scrolling, the text seems to be flickering. Is there a way to make the smooth rendering onscroll? Maybe through CSS alone? Here is the script I used: https://sta ...

cssangularparallax

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Interactive table with dynamic data retrieval

I need help displaying data dynamically from a datatable using an API. The API I am working with is located at this URL and I am utilizing the bootstrap4 datatable. You can also find my code on this JSFiddle. Can someone provide guidance or an example on h ...

javascriptjqueryhtmldatatablebootstrap-4

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Hey there! I've got this snippet of HTML code that I'm working with: <div class="template-page-wrapper"> <div class="templemo-content-wrapper"> <div class="templatemo-content"> <div c ...

htmlcss

Creating a navbar that sticks to the top of the page

I've been working on some code to create a sticky navbar that remains fixed as I scroll down, but unfortunately, it's not working. I suspect the issue might lie in the CSS, as the HTML and javascript seem fine. Interestingly, this same code has w ...

javascripthtmlcssonscroll

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without dis ...

htmlcssbootstrap-4

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

Tips for maintaining the height of the outer div consistent with that of the inner div

I am encountering an issue with an inner div that is used for overlay and set to a min-height property. Despite changes in the overlay's height, the height of the outer div remains unaffected. #outer { width: 70px; height: 70px; background-co ...

htmlcss

How can I prevent a span in CSS from stretching its parent element?

Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content d ...

htmlcsstwitter-bootstrapwidth

Taking on The Notch: How Can I Improve?

I'm currently working on a website for my friend's bar, but I'm facing an issue with Chrome where the content can't push past the "notch". Interestingly, Safari displays it fine on mobile, while Chrome has this unsightly white space. I ...

htmlcssiosgoogle-chromemobile

The Bootstrap 4-alpha.6 Jumbotron is failing to display correctly or appear as expected

While I have successfully compiled the full source of Bootstrap using Gulp, NPM, and Bower, I am encountering an issue with getting the jumbotron to display properly. Despite my efforts, the jumbotron does not appear on the page, not even the text. Initia ...

twitter-bootstrapbowerbootstrap-4gulp-sass

Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here Below is the CSS-Styling + HTML code: .eleme ...

htmlcss

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

javascriptjqueryhtmlcss