The styles within a media query are not being successfully implemented

Question

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!

html css media-queries

Answer 1

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 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 3

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.

Answer 4

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

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

The styles within a media query are not being successfully implemented

Answer №1

Answer №2

Similar questions

Checkbox customization that shifts position when clicked

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

Display updated text on hover over button panel

Is there an optimal method for transforming HTML to PostScript in Java?

Interactive pop-up window featuring a top section, main content, and bottom section

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

The thumb of the range input is misaligned with the axis markers

Achieve maximum height with background images

How can I align the kendoMenu in the center when the menu width is unpredictable?

What is the method for adjusting the subheader color on a Material UI card component?

Determination of Vertical Position in a Displayed Table

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

Navigate to specific location within a hidden overflow

Why is my CSS selector automatically converted to uppercase in Internet Explorer?

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

The website is experiencing some trailing spaces and overflow issues

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

Using an HTML ellipsis without setting a specific width

Showing ASP code within a DIV element (inline)

Tips for adjusting alignment in MaterializeWould you like to change the alignment