The code @media (max-width: 767px) { /*content*/} is malfunctioning

While working on making my webpage responsive, I discovered that the key CSS modification for responsiveness is the @media rule. However, I am facing an issue with one specific part of the code.

@media (min-width: 768px) and (max-width: 979px) {
    .dropdown-content {
      margin-left:10%
 }
}

The section that corresponds to the tablet window version in the bootstrap-responsive.css is functioning properly. But when I switch to the mobile window version, defined as max-width :767px, the HTML page is not recognizing it.

@media (max-width: 767px) {
  .dropdown:hover .dropdown-content {
      display:none;
 }
}

In the mobile version, this particular code snippet is not being applied. My goal is to utilize the first CSS code during the tablet version and the second CSS code during the mobile version. Is there a link to a JavaScript file that I may be missing or could it be something else? Any help with a solution would be greatly appreciated.

Edit: I have made some changes to the attributes and included additional HTML code below.

<li class="dropdown">
    <a href="policies.php">Policy</a>
      <div class="dropdown-content">
        <!--dropdown-content div-->
      </div>
</li>

By default, the dropdown-content attribute is set to:

 .dropdown-content{
    display:none;
    }

When hovering over the dropdown, the following code comes into effect:

    .dropdown:hover .dropdown-content{
        display:block;
    }

However, in the mobile version, I want to hide it again so that hovering on the dropdown does not reveal the dropdown-content.

htmlcssresponsive

Answer №1

Make sure to utilize 

@media only screen and (max-width:767px){}
instead of @media (max-width: 767px) {} 

@media only screen and (max-width:767px) {
  .class_name { width:200px; height:200px; background:#ccc;
      /*attribute_change2;*/
 }
}
<div class="class_name"></div>

Answer №2

Make sure to click on the expand option found on the right under "RUN CODE SNIPPET" to see the working example.

You can also check out this link.

Give this a try:

body {
  height: 100%;
  margin: 0;
  font-family: 'Unica One', sans-serif;
  background: #fff;
}
#main-nav li:hover ul{display:block;}
h1{font-size:25px;}
.navbar-toggle span{background:#000;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<nav id="header" class="container">
<div id="navi" class="navbar-header">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar b1"></span> <span class="icon-bar b2"></span> <span class="icon-bar b3"></span> </button>
<h1 class="pull-left"><a href="#">BRAND NAME</a></h1>
<div class="navbar-collapse collapse">
<ul id="main-nav" class="nav navbar-nav navbar-right">
<li><a href="#">Link1</a></li>
<li class="dropdown">
<a href="policies.php">Policy <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-content">
<li><a href="#">Link4</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
</div>

</div>
</nav>

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

Which DocType is most suitable for my web application?

I'm grappling with the HTML and XHTML specifications, and I can't decide which one to go for. Can you help me understand which is better? For instance, if I have a web application in PHP that searches an image database and displays results dynam ...

phphtmlajaxstandards

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

javascripthtml

The Boostrap-5 carousel seems to be malfunctioning and not functioning correctly

I've been teaching myself how to construct websites using tutorials and other resources. I'm currently diving into the world of Bootstrap, but I'm having trouble with the carousel feature. No matter how much I try, the slides get stuck on th ...

htmlxcodeperformancecarouselbootstrap-5

I've attempted various methods but the header stubbornly refuses to change its color

Looking for help with my website I'm working on changing the header menu color on my site. I managed to change the colors of the menu items themselves using code provided by someone here, which was great. However, I'm struggling to change the de ...

csswordpressmenucolorsheader

How can I automatically add and remove the active class to the navigation on a single page layout?

Is there a way to automatically add an active class to the navbar links when a specific navigation section appears as you scroll down a one-page layout? Similarly, can the active class continue to move to the corresponding section in the nav links as you s ...

jquerycssnavigation

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

After placing ads on my website, they are displaying properly. However, I am receiving an error repeatedly in the console when the page loads: A frame from origin "" is being blocked from accessing a frame with origin "". The requesting frame has an "ht ...

javascripthtmlcssadsense

Storing data locally with Localstorage and manipulating it with Jquery

I'm experiencing an issue with localstorage that I need help with. Context I am currently working on a web application for quotes that requires a bookmark system to save users' favorite quotes. To address this issue, I have created a jQuery scri ...

jquerycsshtmllocal-storage

Arranging SVG icons in a row within the navigation bar

Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...

htmlcsssvgiconsnavbar

Adjusting the size of an element in Angular JS as a textarea expands

I have created a directive that allows for writing and previewing comments, similar to the conversations in Github. The directive consists of two HTML elements: a textarea and a div (utilizing angular-marked). My goal is to dynamically resize the div as I ...

htmlangularjsresize

I'm looking for a tool or plugin for webpack that can generate inline CSS directly from SASS code

Looking to generate a unique HTML code using only inline CSS. Here is the initial HTML file: <div id="highlighted">This is the highlighted text.</div> Accompanied by this Sass file: #highlighted { background: #ff0; } Now, the goal is t ...

htmlcsswebpacksass

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by i ...

javascriptcsshtmlbootstrap-4

CSS animation for typing effect not functioning correctly as text is being displayed before the animation starts

In the realm of HTML and CSS, I am currently immersed in a project that integrates a video with animated text. The text is brought to life within a comment box (class: "yellow_rec") that is nested inside an orange background box (class: "org_rec"). My main ...

htmlcssanimationcss-animations

How can I simultaneously submit both the file and form data from two separate forms on a single page using PHP?

My webpage features a form with a series of questions, each followed by an option to upload files if available. I made sure not to nest forms within each other, instead using a method where the upload form pops up separately. However, I encountered an issu ...

phpjavascripthtmlforms

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Using CSS to create a series of spans separated by commas

Imagine having 4 spans arranged in a block on your webpage. These spans are filled with content from a knockout viewmodel, but sometimes they may be empty. How can we display them in a visually appealing, comma-separated format while considering their poss ...

htmlcss

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

htmlreactjsnext.jsnext.js13nextjs-image

When receiving a parameter in Javascript, one common issue is that the

So far, I have attempted to use both 'cv' and "cv" in the code, but it still returns as undefined. Using HTML (Laravel Blade) <button class="btn btn-danger" onclick="deleteType({{$cv->id,"cv"}})"> ...

javascripthtmllaravelparametersundefined

Sophisticated method in JavaScript to conceal and reveal div elements

My knowledge of front-end web development is strongest in HTML and CSS, but when it comes to JavaScript, I feel like there must be a more efficient way to achieve the functionality I want. On my website, I have a set of <li> items that, when clicked ...

javascriptjqueryhtmlcss