Struggling to implement custom media queries in a bootstrap theme

I've customized the Twitter Bootstrap layout for my website, and everything is looking great except for the @media queries. Can anyone help me figure out what's going wrong?

HTML:

<section id="lessons" class="bg-black no-padding lesson-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <img src="/clients/wt/images/lesson_01.jpg" alt="Image 1" />
        <img src="/clients/wt/images/lesson_03.jpg" alt="Image 3" />
      </div>
      <div class="col-lg-4 hideable">
        <img src="/clients/wt/images/lesson_02.jpg" alt="Image 2" />
        <img src="/clients/wt/images/lesson_04.jpg" alt="Image 4" />
      </div>
      <div class="col-lg-4 text-right expandable">
        <h3>Content Title</h3>
        <p>More content here</p>
      </div>
    </div>
  </div>
</section>

CSS:

@media screen and (max-width: 900px) {
  .hideable {
    display: none;
  }
  .expandable {
    width: 66.6666667%;
  }
}

The idea is that the .hideable column should disappear and the .expandable one will take its place. If you check out the development site at , when you resize the window, you'll notice that the middle photos in the "Lessons" section don't disappear.

htmlcsstwitter-bootstrapmedia-queries

Answer №1

Within the Bootstrap CSS, you will find:

@media (min-width: 1200px)
.col-lg-4 {
  width: 33.33333333%;
}

as well as

@media (min-width: 1200px)
.col-lg-1, .col-lg-10, .col-lg-11,
.col-lg-12, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9 {
  float: left;
}

To achieve the desired effect beyond a minimum width of 1200px, you need to maintain both styles. The following code snippet accomplishes this:

@media screen and (max-width: 1200px) {
  .col-lg-4 {
     width: 33.33333333%;
     float: left;
  }
  .hideable {
    display: none;
  }
  .expandable {
    width: 66.6666667%;
  }
}

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

Tips for increasing the height of a popover when clicked

When a user focuses on the password input, a popover displays information. At the bottom of the popover, there is a link. How can I make the popover expand when the user clicks on this link? I have tried adding an !important class for the height value, us ...

javascriptjquerytwitter-bootstrappopover

jQuery eliminates the placeholder text in a textarea once the textarea text has been cleared

I'm dealing with a Bootstrap modal that contains a textarea. My goal is for the textarea to be empty every time the modal is opened. However, I've run into an issue where using $('textarea').val('') to clear the text also rem ...

jquerytwitter-bootstrap

Looking to modify the HTML layout in order to be compatible with a specific script

Utilizing a form validation script with required:true data-validation will stop the form from submitting and highlight invalid fields in red by adding "has-error" to the parent container when the user submits the form. In the code snippet below, "has-erro ...

htmlvalidation

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Height of list items in image gallery does not automatically readjust

I'm facing an issue regarding the height of an li element. Check out this CodePen link for reference. <div class="row fp-gallery"> <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2"> <li> <a href= ...

jqueryhtmlcsszurb-foundation

Anchoring HTTP headers in HTML tags

Currently, I am working on some code to enable dragging files from a web app to the desktop by utilizing Chrome's anchor element dragging support. The challenge I am facing is that certain file links require more than a simple GET request - they nece ...

javascripthtmlhttp-headersanchor

Show the meta-field mp3 and place it in a lightbox container on the portfolio page

My Current Portfolio Gallery Setup: Currently, my portfolio gallery is displayed in a masonry grid format using the JIG plugin. This grid showcases images from my custom post_type. When clicking on a thumbnail, a lightbox pops up showing the full photo. T ...

javascriptphpjqueryhtmlwordpress

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

javascriptjqueryhtmlcssweb

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

javascripthtmljqueryajax

Pressing the ENTER key does not submit the text box data in Rails/Bootstrap, but clicking the SUBMIT button does

I need assistance with my Rails 4 and Bootstrap 3 project. I have implemented an email address field on my page (localhost:3000) where users can enter their email and click the SUBMIT button to send it to the MongoDB database. However, pressing the ENTER k ...

javascriptjqueryruby-on-railsmongodbtwitter-bootstrap

How can you set up a button to trigger an action only after reaching a specified number of clicks?

Is it possible to create a button in HTML that remains inactive until a specific number of clicks have been registered? Imagine a scenario where a button does nothing when clicked until it has been tapped 100 times. Upon the 100th click, it redirects to a ...

htmlbuttonclick

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

jquerycss

Assistance with selecting elements using jQuery

I'm facing a challenge with a code that I cannot change. My goal is to introduce a selector that can choose (upon clicking) all elements below it until the next occurrence of the main element. The catch is that they are not nested, just stacked on top ...

javascriptjqueryhtmlweb

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

htmlcss

Disregard any labels when it comes to clickable areas for mouse events

Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the ...

javascriptjqueryhtmlcss

Experience mind-bending timing functions in CSS animations with IE11

Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...

htmlcssinternet-explorer-11ie11-developer-tools

Is it recommended to include the default declaration in the same stylesheet as the media queries?

In order to optimize my code structure, I placed the default declaration in the style.css file and kept all media queries separated in a stylesheet named enhanced.css. For instance, an example of a code snippet I have in the style.css looks like this: .b ...

cssmedia-queries

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...

htmlcss

"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...

cssangularag-grid