The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly.

I have a set of html and css code that is functioning as expected. However, when I added two media queries in the css file to make some style adjustments, none of the changes from the media queries seem to take effect. Here is the snippet of my media query code:

@media screen and (max-width: 975px){
    body .top_outermost_container {
      width: 976px;
    }
}
@media screen and (max-height: 485px){
    .bottom_bar {
        top: 445px;
        bottom: auto;
    }
}
*/

I have shared the entire code here: http://codepen.io/anon/pen/CJgqI. Your insights are highly appreciated! Cheers. You guys are awesome. Note: To view the page properly, you may need to copy and paste the code into a text editor for better browser rendering quality. THANK YOU ONCE AGAIN!

htmlcssmedia-queries

Answer №1

It seems like the issue you're facing is that you forgot to close off your first @media query. The code 

@media screen and (max-width: 975px) and (max-height: 438px){
is missing a "}". The second query won't work because it cannot be nested inside another query. So, around line 228, you need to add a closing "}" just before the 
@media screen and (max-width: 975px){
query. However, there are some other issues as well.

The errors appear to be coming from the HTML where you have missed closing tags "

Line 15: <div class="top_contained_container"></div>
Line 39: <div class="bottom_list_container1"></div>
Line 49: <div class="bottom_list2"></div>

You can use a Validation tool like to check for errors.

In your CSS, there are also some errors like extra closing tags "}."

Line 114: body {overflow: hidden;}

You can catch these errors more easily using validation tools like .

Answer №2

It appears that the trailing */ could potentially cause an issue.

Your code syntax seems to be in good shape and should function properly.

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

I am looking to upload an image to the database using ajax or any alternative method

I need assistance in uploading an image to a Spring Boot backend via AJAX or any other method. Below is the img tag and form I have implemented, along with an AJAX request to send form data. How can I include the image in this process? AJAX request (exclu ...

javascriptjqueryhtmlajaxspring-mvc

Understanding and processing HTML strings in typescript

I am currently utilizing TypeScript. Within my code, there is an object named "Reason" where all variables are defined as strings: value, display, dataType, and label. Reason = { value: '<ul><li>list item 1</li><li&g ...

htmlreactjstypescriptparsing

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

javascriptjquerycssslider

Inject the variable into location.href

I am dealing with a dynamic URL, and I want to achieve the following in my HTML: <a onclick="location.href='myVariable';"><span>Click here</span></a> The issue is that this approach displays the actual string 'myVar ...

htmlangularjsvariableslocationhref

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

javascriptjqueryhtmlcss

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

javascripthtmlfirebuginspect

The execution of jQuery code from PHP using $.ajax is not functioning properly

I am attempting to run a jQuery code from a PHP page using AJAX. Modify the HTML of div.error Here is the code (Let me know if there is a simpler method): - no $.load HTML/jQuery: jquery.js already loaded <input type='text' id='test&a ...

phpjqueryhtml

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: FireFox: Upon comparing the photos, it's clear that the width of the input in C ...

htmlcsswidthpixel

Implement a dropdown menu for filtering, but it is currently not functioning as expected

When I select a city_name, my goal is for the graph to only display information pertaining to that particular city. In the params section of my code, I have included filtering options using a selection menu in Vega-Lite. However, despite selecting Brisba ...

javascripthtmlvega-lite

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Tips for applying an active class to buttons using ng-click?

Here is the HTML code for the buttons. The taskfilter is the filter that controls how the buttons work when clicked and the class name is 'sel' <a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'sel':enabled}"> &l ...

javascripthtmlangularjs

The placement of the sliding navigation menu is consistently positioned beneath the header

I created a jQuery menu that's also available on JSfiddle here: $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible ...

jqueryhtmlcss

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

Hello and thank you for your help, I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjus ...

htmlcss

Automatically reloading POST request when browser back button is pressed

Our web application is built on Spring MVC and Thymeleaf. When a user lands on the home page with a GET request, they enter 2 parameters and submit a POST request. After successful submission, they are directed to another page (let's call it page2) wi ...

javascripthtmlbrowser

Using Selenium to interact with drop-down lists using div tags instead of select tags

As a newcomer to automated testing using Selenium Web Driver, I am struggling to test drop down lists for the location type without relying on the select command. The element in question is enclosed within a div tag. I attempted sending keys but that meth ...

javascriptpythonhtmlseleniumweb-scraping

Ways to position a div at the center of a page

I've encountered a challenge while creating a mobile website. Within the main div, there are three nested divs. Initially, I aimed for left alignment but now desire to center-align these three divs on the page. Essentially, if the device screen is wid ...

csshtmlcenteralignment

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

What is the purpose of using square brackets in a CSS style declaration?

I've recently taken over the management of a website and I came across some unfamiliar CSS syntax. Has anyone encountered this type of syntax before? Can someone explain what the square brackets inside a style represent? Thank you, Rob .trigger-tx ...

css

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api