The media queries seem to be ineffective

Looking for some assistance here. I'm having trouble with my media queries not working as expected. Specifically, I'm attempting to adjust the padding on the navigation menu of my website. Despite setting up a media query to change the padding for screens that are 768px wide, I'm not seeing any changes. I've included the necessary meta tag below:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

However, even after adding the meta tag, the media query doesn't seem to be taking effect. Here's what my media query looks like:

@media screen and (max-width:768px) {
    .menu-onesg-menu-container ul li a {
        padding: 0px 15px 0px 0px;
    }
}

Any ideas on why this might not be working as expected?

cssmedia-queries

Answer №1

My analysis points to the source of the issue: Switch ; to ,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Controlling multiple bx-sliders with a single pager using only JavaScript

Is there a way to control 3 sliders using the same pager? I attempted to use the following code but it did not work: <script language="javascript"> $('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({ //pagerCustom: '#bx- ...

javascripthtmlcss

Inconsistencies in spacing between shapes bordering an SVG Circle using D3.js are not consistent across platforms

After creating a SVG circle and surrounding it with rectangles, I am now attempting to draw a group of 2 rectangles. The alignment of the rectangle combo can either be center-facing or outside-facing, depending on the height of the rectangle. However, I am ...

javascripthtmlcssd3.jssvg

Is there a way to eliminate the space between the content inside a table cell and its borders?

I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...

htmlcss

Is it possible to showcase a FullCalendar event in full width while being positioned behind other events scheduled for the same time slot?

Is there a way to customize FullCalendar so that concurrent events in the same timeslot are not vertically divided? I have a Google calendar named "time-blocking template" where I want all events to take up 100% of the timeslot width, even if there are ot ...

jquerycssfullcalendar

The grid is intended to be positioned horizontally, but is currently being shown vertically

I need help fixing the layout of my items. They are currently displaying vertically instead of in a horizontal row. Any suggestions on how to correct this? https://i.stack.imgur.com/CQ4yG.jpg <div class="col-lg-12 col-sm-12 portfolio-item"> <d ...

htmlcssbootstrap-4

The bootstrap code I wrote runs smoothly on Codeply's online compiler, but unfortunately it's not functioning properly in VS code

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="">OurCoolBrand</a> <button class="navbar-toggler" type="button&quo ...

htmlcssbootstrap-4

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium

The alignment of navbar elements appears to be off in Jquery mobile

Currently working on an app using Jquery mobile, and encountering an issue where the navbar is not displaying elements in line. The google chrome console is indicating spaces between list elements. Upon removing these &nbsp characters, the elements ali ...

csshtmljquery-mobilenavbarjquery-mobile-navbar

Adjust the positioning of the content within each card inside the modal box

I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, plea ...

htmlcssbootstrap-4

How can I integrate custom PHP pages into Odoo Community 12?

I am looking for a way to integrate my custom PHP webpages with the login page of Odoo Community that is already set up and functioning on my server. I want specific users to be redirected to my custom pages after logging in. Any suggestions on how to ac ...

javascriptphphtmlcssodoo-12

Is there a way to prevent a span from appearing at the end of a line?

Imagine a scenario where I have a paragraph with various span elements that are styled using classes. What if there are numbers interspersed within the text for easy reference, and I want to ensure they do not end up at the end of a line? For example: 1 ...

htmlcssformattingstyles

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

javascripthtmlcssreactjstag-cloud

Increase the size of a div to equal the combined width of two divs located directly below it

I need help aligning 3 divs so that the top div stretches to match the width of the bottom 2 divs combined. Here is an image showing the expected div positioning. I attempted to use display: table-row for the divs. <div id="main_div" style="display: ta ...

htmlcss

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

htmlcssbootstrap-4

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

https://i.sstatic.net/0iIPb.png To ensure that the second div appears above the slide div, I have applied the position:absolute property to the second div. Since the first div is a slide, I had to position the second div outside of the first div. Do you h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unique solution: "Using CSS to ensure the overflow document always scrolls to the bottom

Is there a way in CSS to make a div with overflow: scroll always automatically scroll to the bottom along the Y-axis, regardless of its content? For example, like a chat thread that consistently displays the latest message at the bottom. I've encount ...

css

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling wit ...

javascriptjqueryhtmlcss

Memory Match: Picture Edition

In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...

javascripthtmlcss

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

phpjqueryhtmlcss