Utilize media queries to deactivate a CSS rule at a specific screen width, in conjunction with Bootstrap grids

I'm working on a webpage with a sidebar that needs to adjust its size based on the screen width:

  1. When the screen is below a certain size, I want the sidebar to be short and wide (width of the screen).

  2. When the screen is above a certain size, I need the sidebar to be long and thin (length of the screen).

Note: I created screenshots by manually editing CSS rules.

I've been trying to use Bootstrap and media queries to achieve this by changing the column size and height, but so far, it's not working as expected.

@media screen and (max-width: 300px){
    /* Apply only when the screen width is less than 300px */
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
        height: calc(100vh - 5em) /*<-----never applied*/
    }
}
@media screen and (min-width: 300px){
    /* Don't apply when the screen width is greater than 300px */
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
    }
}

<div class="sidebar-wrapper col-md-2">
    <ul class="sidebar-nav">
        <li class="sidebar-brand sidebar-item">
            <a href="#">
               Malmesbury Tandoori
            </a>
        </li>
        {%for section in foodcategory_list%}
        <li class = "sidebar-item">
            <a href="#{{section.name}}">{{section.name}}</a>
        </li>
        {%endfor%}
    </ul>
</div>
<div class = "menu-wrapper col-md-10">
    <h2>Menu</h2>
    <table>
        .....table stuff........
    </table>
</div>

I've looked for tutorials and explanations but can't seem to fix why my rules are not being applied. Can someone offer some guidance?

Answer №1

This approach could be effective in providing inspiration or guidance. By adjusting the sidebar dimensions to 100% within your media query without utilizing columns, you may find a suitable solution. Review this example for reference.

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}
.sidebar-left {
  background: green;
  color: white;
  padding-top: 25px;
  font-size: 14px;
}
.sidebar-left ul {
  list-style: none;
  text-align: left;
}
@media (min-width: 480px) {
  .main-wrapper {
    padding: 5px 20px;
    margin: 0 auto;
  }
  .sidebar-left {
    width: 150px;
    height: 100%;
    float: left;
    overflow: hidden;
    overflow-style: auto;
    position: absolute;
  }
  .content-container-right {
    height: 100%;
    overflow: auto;
    overflow-style: auto;
    position: relative;
    margin-left: 150px;
    overflow-x: hidden;
    /*border:5px solid #fff;*/
  }
}
@media (max-width: 479px) {
  .main-wrapper {
    padding: 5px 10px;
    margin: 0 auto;
    width: 100%;
  }
  .sidebar-left {
    background: green;
    height: 100%;
    width: 100%;
  }
  .sidebar-left ul {
    padding-right: 20px;
  }
  .sidebar-left ul > li {
    display: inline-block;
  }
  .content-container-right {
    height: 100%;
    margin-left: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<img src="http://placehold.it/2500x500/f5f5f5/ff0?text=Image" class="img-responsive">

Answer №2

After testing your code, it appears to be working correctly and displaying the desired result. However, I noticed that you did not include a semicolon ";" in this part of your code: height: calc(100vh - 5em). Although this should not be causing any issues as modern browsers are intelligent enough to interpret it.

HTML

<div class="sidebar-wrapper col-md-2">
    <ul class="sidebar-nav">
        <li class="sidebar-brand sidebar-item">
            <a href="#">
               Malmesbury Tandoori
            </a>
        </li>
        <li><a href="">aaaa</a></li>
        <li><a href="">bbb</a></li>
    </ul>
</div>
<div class = "menu-wrapper col-md-10">
    <h2>Menu</h2>
    <table>
        .....table stuff........
    </table>
</div>

CSS

@media screen and (max-width: 300px){
    /* Only apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color:hsl(115,75%,25%);
        height: calc(100vh - 10em); /* This line was never applied */
    }
}

@media screen and (min-width: 300px){
    /* Don't apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color:  hsl(115,75%,25%);
    }
}

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 can you specify a "default" value for history.pushState and replaceState?

What value should be used in the title param for browsers to use their default settings? In Safari 5.1.7 (7534.57.2), using either null or undefined as the title param defaults to the browser's settings. However, Opera 12.16 interprets "null" and "u ...

In the production and development environments, the interpretation of CSS classnames is being rearranged

Currently utilizing create-react-app v2. I've encountered an issue with a component that has multiple classnames: "x15 x14 login-form__field". Strangely, in the production build, the order of '.x14' and 'login-form__field' seems t ...

Include a new variable in a JavaScript email template

Is there a way to include the variable bob in the body of an email? var bob; function sendMail() { var link = "mailto:YourEmailHere" + "?cc=" + "&subject=App Build Link Buit With MWFPRO's App Build Tool" + "&body=Hi ...

Tips for enabling scrolling on mobile devices

Hello there, I'm facing an issue with scrolling on my website when viewed on mobile devices. Even though I have set the div height to 100%, it appears as 'auto' on mobile screens. As a result, when the text exceeds the screen height, it bec ...

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

The MDB Bootstrap collapse fails to display on the initial click

Every time I click on the button, there seems to be a delay in showing the collapse feature. It's strange because on subsequent clicks it works fine ...

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of ...

Leveraging a global variable value within an AJAX JSON POST request

I want to send a JSON post request to my Elasticsearch instance using AJAX. Is it possible to include a global variable's value in the 'data' section of the request? Could it look something like this? $(document).ready(function() { $(&ap ...

What is the most effective way to optimize the placement of Google fonts code in the <head> section?

When it comes to optimizing efficiency and minimizing page load time, where is the ideal placement for the Google Fonts code in your <head>? Should it be placed before or after other stylesheets and scripts? Are there any factors besides performanc ...

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

I am working with some bootstrap HTML code that includes an ng-repeat function. <div class="row"> <div class="col-lg-4" ng-repeat="p in persons"> <img class="img-circle" src="images/{{ p.image }}" width="140" height="140"> < ...

Issue with Selenium: Unable to select the WebElement

I am a beginner with selenium and I have encountered a problem while trying to click on a specific element using the following locators. Unfortunately, none of them seem to work as expected and my scripts just skip over that particular line without any err ...

send a variable across multiple web pages at the same time

Currently, I have a variable that needs to be passed through multiple PHP pages. The code below effectively sends the variable to one page (index.php). echo "<a href='index.php?PHOTO=".$i."'>select</a>"; However, I am wondering how ...

Tips for customizing the Link component in ReactJS to display innerHTML

After researching various methods for extending a React component through inheritance, I discovered that most examples focused on adding events rather than manipulating the innerHtml. This led me to ponder a simpler approach: // React packages import Reac ...

Expand the <canvas> element to completely fill the flex item without any scrollbars

I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...

Combine words into lowercase in JavaScript variable

I'm struggling to understand why the data from a form field input is not being stored correctly in a SharePoint column data collection. Currently, when someone inputs a name into a form field, it should automatically populate a SharePoint list: http ...

minor issue with the background in CSS

I am trying to display two icons side by side using HTML code. Here is what I have: <head> <style> .icon_one{ width:25px; height: 20px; background:#ffffff url('icon_one.jpg') no-repeat right top; } .icon_two{ width:2 ...

Display a tooltip when the cursor hovers close to a line in D3 visualizations

Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://i.sstatic.net/kYpeg.png https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when user ...

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Within my design, I have several rows with 3 columns each. Every column contains a main content section labeled SavedSearchBox-content (with various permutations that affect its height) and a footer labeled SavedSearchBox-footer. To structure this layout, ...