"Troubleshoot: Why isn't my CSS media query functioning

I need help with hiding a div on desktop and showing it only on mobile devices. The code can be found here

Specifically, I want the following code snippet to execute only in the mobile version: 

<div class="mobiupdbox">
         <div class="ovalmain"> Updates</div>
         </div>
However, it is showing up on the desktop version as well.

Interestingly, when I tested the same code on jsfiddle here, it worked as expected (the 'Updates' section was not displayed). I am confused about what I might be doing wrong. Any assistance would be greatly appreciated as I have been struggling with this for some time now.

htmlcss

Answer №1

When looking to conceal the division when it reaches sizes larger than 600px, you can achieve this using a media query like in this example:

@media all and (min-width: 601px) {.....}

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

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Looking to create a bootstrap modal with a unique layout? Interested in having two columns that can be scrolled separately? body, html { font-size: 10px } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...

htmlarraysangulartypescriptforms

What is the best way to incorporate user-provided values into a dynamic URL?

I am trying to create a feature where users can input a value and then click a button that will take them to a URL tailored to their entry. Here is my current code, but I am facing an issue - the user_input data does not seem to be passed to the URL when ...

javascripthtml

The JavaScript game's set interval function is failing to execute at consistent 10-second intervals

Trying to incorporate gravity into a circular object in an HTML, CSS, and JavaScript game. Here is the relevant JavaScript code section: Check out the code on repl.it: https://repl.it/join/wukcvzow-iamapersonthing The specific part of interest in this tu ...

javascripthtmlcsssetinterval

Load Angular component on demand with necessary dependencies

Searching for an elegant solution (without resorting to private APIs) to create a widget-style dashboard. The goal is to dynamically load components based on user role. Is there a way to import a component and its dependencies included in the component&ap ...

htmlangulartypescriptangular-ivy

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

What are the solutions to repair a triple drop-down menu?

I am struggling with the code below which contains numbers inside the values: What I need is to modify all instances of the following codes: <option value="1" class="sub_1"> To look like this: <option value="" id="1" class="sub_1"> Basical ...

javascriptjqueryhtmlcssajax

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

How to align text to the bottom of a div using CSS

I am struggling to position the text 'About' at the bottom of an image. The red line marks the spot where I want the text aligned at the bottom. However, every method I try results in inconsistent outcomes when viewed on desktop and mobile device ...

htmlcss

What steps do I need to take to create my own Japanese tatami mat design?

Looking to design an HTML layout inspired by the classic Japanese tatami mat pattern. https://i.sstatic.net/vLUtp.png Experimented with using rowspan and colspan in a table layout, making progress until the final colspan caused things to collapse. td ...

htmlcss

Submitting data using various submit buttons in PHP

I am facing an issue with multiple submit buttons in my form, each containing hidden values that are dynamically generated. The problem arises when I can see the correct values in the HTML source code, but upon submitting one button, all other values get s ...

phphtmlarraysformspost

Leveraging the capabilities of the phonegap framework alongside node.js, javascript, html, mysql, and css

Could someone demonstrate how to utilize phonegap and node.js to interact with a mySQL database by pushing and pulling data from an HTML page or form? THANKS EDIT var connection = mysql.createConnection({ host : 'localhost', user : 'root& ...

htmlnode.jscordova

"Mastering the art of CSS: The ultimate guide to perfecting

I am seeking advice on the best way to format the layout below, ensuring everything is properly aligned and neatly spaced: Below is the HTML code: <div class"wrapper"> <img alt="Image 1" src="images/image1.png" /> <div class="descripti ...

htmlcssformatting

Choosing between classes and styles for styling components in ReactJS

Can you explain why the call to the classes object works in the code below, rather than to the styles object defined as a const at the beginning? For instance, take a look at this demo: className={classes.button} The above line functions correctly. Howe ...

javascriptcssreactjsclassmaterial-ui

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

javascripthtmlcss

Filtering arrays using Vue.js

I have developed a sample e-commerce website to showcase various products to potential customers. The website boasts features like filters, search functionality, and sorting options to enhance the user experience. However, I've encountered an issue sp ...

javascripthtmlvue.js

Irregular word spacing observed in HTML code

The alignment of text on my website is causing some spacing issues that I can't quite seem to resolve: It's an asp.net page, and I've attempted a couple of potential solutions: CSS .optionClosed { font-size: large; ...

htmlcss

Employing jQuery to save the href value as a fresh variable

There is an anchor tag with id 'item-1' that needs to be stored in a new variable called 'href'. The tag looks like this: <a id='item-1' href='#something'> To achieve this using jQuery, what approach should be ...

jqueryhtmlfrontend

Troubleshooting: Issue with Bootstrap 4's container-fluid not functioning as

I recently started learning Bootstrap 4 through a Udemy tutorial but I'm having trouble with the container-fluid class. Despite my efforts, the container doesn't stretch to full width as intended. Here is the code I'm working with: <!doc ...

cssbootstrap-4