Troubleshooting CSS media queries: why isn't the display: none property functioning as

I am facing an issue with my code:

HTML

<section id="offer">
            <div class="container">
                <div class="row">
                    <div class="col col-md-12">
                        <h2>Offer</h2>
                        <p>
                            <img src="images/offer_img.jpg" class="img-responsive pull-left offer-img">
                            Vestibulum tristique turpis ac ligula pellentesque
                        </p>
                        <h4>We have the best offer in this country!</h4>
                        <ul>
                            <li><i class="fa fa-check"></i>morbi sollicitudin porttitor mi ac faucibus</li>
                            <li><i class="fa fa-check"></i>mi ullamcorper nisl laoreet placerat </li>
                            <li><i class="fa fa-check"></i>ut sem vitae dui bibendum</li>
                        </ul>
                        <p>Pellentesque placerat ante sit amet augue sagittis, quis laoreet ipsum egestas. Vestibulum tristique turpis ac ligula pellentesque, sit amet luctus velit vehicula. Curabitur malesuada leo sit amet nisi sagittis, mattis fringilla dui commodo. Morbi fringilla risus ut massa varius, at faucibus nibh maximus</p>
                        <p>Maecenas venenatis nisi non erat efficitur dictum</p>
                    </div>
                </div>
            </div>
        </section>

I am attempting to make this section invisible when the screen is resized to 400px or smaller. Below is my CSS Media queries code.

@media all and(max-width:400px)
{
    .navbar-brand img
    {
        height: 63px;
    }

    #offer
    {
        display: none !important;
    }
}

Answer №1

To accomplish this task, there is no requirement to utilize bootstrap. Simply adjust your media query selector as follows:

@media only screen and (max-width:400px) {

Furthermore, ensure that the viewport settings are correctly defined by including:

<meta name="viewport" content="width=device-width">

Answer №2

@media (max-width: 400px) {
    #promotion{
        visibility: hidden;
    }
}

Answer №3

If you're utilizing Bootstrap, simply add the CSS class hidden-sm to the h2 element (for small devices and tablets with a minimum width of 768px).

 <section id="offer">
        <div class="container">
            <div class="row">
                <div class="col col-md-12">
                    <h2 class="hidden-sm">Offer</h2>
                    <p>
                        <img src="images/offer_img.jpg" class="img-responsive pull-left offer-img">
                        Vestibulum tristique turpis ac ligula pellentesque
                    </p>
                    <h4>We have the best offer in this country!</h4>
                    <ul>
                        <li><i class="fa fa-check"></i>morbi sollicitudin porttitor mi ac faucibus</li>
                        <li><i class="fa fa-check"></i>mi ullamcorper nisl laoreet placerat </li>
                        <li><i class="fa fa-check"></i>ut sem vitae dui bibendum</li>
                    </ul>
                    <p>Pellentesque placerat ante sit amet augue sagittis, quis laoreet ipsum egestas. Vestibulum tristique turpis ac ligula pellentesque, sit amet luctus velit vehicula. Curabitur malesuada leo sit amet nisi sagittis, mattis fringilla dui commodo. Morbi fringilla risus ut massa varius, at faucibus nibh maximus</p>
                    <p>Maecenas venenatis nisi non erat efficitur dictum</p>
                </div>
            </div>
        </div>
    </section>

For screens with a minimum width of 400px

@media screen and (min-width: 0px) and (max-width: 400px) {
h2 { display: none !important; }  /* hide it on small screens */
}

Hope this information proves useful!

Remy

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

What are some methods for submitting an HTML form to a CSV file?

I've been racking my brain for the past few days trying to find a viable solution to this problem. My project requires 100 individuals to take turns sitting at a computer and filling out a form I created. Each time someone submits their information, ...

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

I made a field using the Input component from material-ui: <Input placeholder="0.00" value={rate} onChange={event => { this.setState({ `obj.rate`, event.target.value }); }} /> Whenever I input a rate into this field, ...

How can I use jQuery to set the text in a select element in HTML?

I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...

Creating a scrolling sidebar in Bootstrap 4

Today I learned about CSS Bootstrap 4 and created my template with a sidebar. However, when there are many menus, I want the sidebar to show a scrollbar. I am looking for help on how to make a scrollbar appear on my sidebar template. Below are my HTML and ...

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

I'm currently developing a basic PHP page where users can choose how many numbers they want to add together. After selecting the quantity, they input the numbers on a new page, click a button, and then see the sum displayed. The challenge I'm fa ...

Find the nearest class name in proximity

I am attempting to find the closest anchor element with a class that has been clicked. However, not all links will have a class assigned to them, so I need to consider the parent class as well. Since the class names will vary, hardcoding specific class nam ...

Separate sentence to one word per line

Can CSS be used to display each word of a sentence on a separate line? Input: <div>Hello world foo bar</div> Rendered output: Hello world foo bar It is not ideal to set the width to 1px, as specified. ...

Link the controls to an HTML table after clicking the button

I'm very new to programming and I'm seeking your help and guidance in order to improve myself. Here is the code where I am trying to add a control to an HTML table upon button click, but I am facing difficulties in its execution. Can anyone assis ...

What is the best method for creating a draggable widget in HTML, specifically with the use of Angular?

I am searching for an HTML div that is free floating and can be dragged and positioned anywhere on the page without being affected by other elements. It's okay if the element blocks the view of elements below, and it would be great if there is a minim ...

What is the best way to access dropdown sub-menu options from a complex multi-level navigation bar

Struggling to figure out how to open my dropdown sub-menu using CSS. Hoping to make it so the user can open it by hovering over the corresponding tag. I attempted to use #lablinksDD to trigger the opening of #ddSbMenu when hovered over #menuDD with #labLin ...

Is it possible for me to create an HTML script that can transfer data from the script to a cell within Qubole?

Is it possible to create an HTML script that allows user interaction, pass the data back to a zeppelin cell, and trigger a rerun of the data? Thank you! Update: I have made some progress in rerunning the cell with an HTML click. The cell I want to rerun ...

Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...

Validating Age Using jQuery UI Datepicker

Creating a dating platform for users over the age of 18, I am utilizing jQuery UI datepicker. To ensure only individuals above the age of 18 can register, I need the YEAR section to display 18 years earlier (1997) instead of the current year (2016). This w ...

Is there a way to include a textarea or text input in a table row and have it expand upon clicking or dragging, without increasing the row height?

I am looking for a way to allow a textarea to expand or grow when clicked or dragged, without affecting the height of the table row it is in. You can see an example of the issue on this CodePen: https://codepen.io/kerastensorflow/pen/PobaRvK?editors=1010 ...

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

Modifying the HTML file won't be immediately visible in browsers

I encountered a frustrating issue while working on my website. Despite making changes to the code, the browsers are not reflecting the updates. This problem is occurring in Internet Explorer, Google Chrome, and Firefox. Initially, I had a div with a link ...

Placing an image in context with the background image

Looking for guidance on CSS styling. I have successfully set up a responsive background image on my page and now want to add a circular logo positioned at the bottom center of it. However, I am facing an issue where the logo's position changes when th ...

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...