Media queries in CSS are not being executed properly when using the `max

Having some trouble fixing the display of a button when adjusting page width in Chrome using inspect and toggle device toolbar. Specifically, when the width is less than 600, the button doesn't show up. Can anyone point out what might be causing this issue? Thanks! 

.login-button {
  font-size: 21px;
  background-color: transparent;
  border: none;
  position: absolute;
  right: 0;
  margin: 8px 10px;
  display: none;
}

@media screen and (max-width: 600px) {
  .login-button {
    display: initial;
  }
}
<button class="login-button">
  <span><i class="fas fa-bars"></i> Button</span>
</button>

htmlcss

Answer №1

Here is a suggested solution:

 .login-button{
   font-size: 21px;
   background-color: transparent;
   border: none;
   position: absolute;
   right: 0;
   margin: 8px 10px;
   visibility: hidden;

}

@media only screen and (max-width: 600px) {
    .login-button {
        visibility: visible;
        font-size: 21px;
        background-color: transparent;
        border: none;
        position: absolute;
        right: 0;
        margin: 8px 10px;
    }
}

Answer №2

It appears that the closing curly bracket was not included. Here is a suggested fix:

@media (max-width : 600px) {
    .login-button {
        display: initial;
    }
}

Answer №3

Check out this solution:

@media only screen and (max-width: 600px) {
    .login-button {
        display: block !important;
    }
}

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

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

javascriptjquerycss

Looking to incorporate HTML5 videos into a responsive Bootstrap carousel?

I've been working on creating a carousel that includes videos. When it comes to images, everything works smoothly as they are responsive even in mobile view. However, I'm encountering an issue with videos where the width is responsive but the hei ...

javascripthtmlcsstwitter-bootstraphtml5-video

The height of scrollbars in the HTML section does not extend to full coverage

On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...

htmlcssscrollbar

Ways to conceal a primary page section upon clicking a different tab

I am currently implementing the w3schools HOW TO - tabs feature on my website to create tabbed navigation. However, I'm running into an issue where clicking on tabs other than 'Home' still displays the 'Home' content along with the ...

javascripthtmlcsstabs

Having trouble with your Bootstrap 4 carousel?

I'm having trouble with my BS4 Carousel code. I followed this tutorial here to create it, but it's not functioning properly. The first image displays but the carousel isn't controllable and doesn't move to the next image. Does anyone kn ...

htmlcsscarouselbootstrap-4bootstrap-carousel

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

javascripthtmlangularkendo-gridjql

Guide on resolving the issue of disabled button's tooltip not appearing upon being hovered over

I have a button that looks like this: <a data-toggle="tab" href="#part4" class="btn btn-info tabcontrol mainbutton col-2 offset-8 disabled" id="part3to4" title="Please acknowledge the checkbox before going next" data-toggle="tooltip" data-html="true" d ...

jqueryhtmltwitter-bootstrap

observing which specific element corresponds to the nth child?

Exploring the concept illustrated in https://api.jquery.com/eq/, imagine a scenario with the following HTML structure: <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item ...

javascripthtmljquerydom

Unable to render Angular charts

Recently, I've been attempting to integrate angular charts using the chart.js bundle sourced from CDN links. The version of Angular being used is 1.5.7 and for chart.js it's 2.1.6. I encountered the following error message: angular.js:13708 T ...

javascripthtmlangularjschartsangular-chart

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Passing a variable using a button's value attribute in jQuery

My goal is to develop a form in my application where users can input their name and address. Once the user enters the information, I need to validate it and add it to an array before submitting it to the PHP function. Additionally, I want to provide users ...

jqueryhtmlbutton

the failure of the second function to execute

Struggling with a particular issue. Two functions have been created as shown below: function limit_char_normal(textid, limit, infodiv){ var text = $('#'+textid).val(); var textlength = text.length; if (textlength > limit) { ...

javascriptjqueryhtml

Background image spacing

Can anyone explain why there is extra space after my background image in this code snippet? (red line in image highlights the spacing issue) Even though the background image doesn't have this space, it seems to extend beyond where the black color ends ...

htmlcss

Removing focus in Meterial-UI [Select] component when clicked outside: Techniques and solutions

Looking to create a simple multiple select feature with Material-UI's Select component. One issue I have encountered is that when deselecting an option or clicking outside the dropdown, the label remains focused until clicked on again or another compo ...

javascripthtmlcssreactjsmaterial-ui

I am getting a 404 error message stating that node_modules cannot be found

I am currently working on a web application using gulp and angular. However, when I run 'gulp serve', the application is unable to locate the files in the node_modules folder. Below is an excerpt from my gulp file: // This gulp file was generat ...

htmlangularjshttp-status-code-404

Ensure your mobile site is optimized for full width display

Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...

htmlcssmobile

Adjust the height of a div to match the tallest element in the same row using jQuery and Javascript

I need to display multiple rows of products, each row containing 4 products. The code snippet below shows an example with only 1 product. To create a row with 4 products, the code for <div class='col-xs-6 col-sm-3 col-md-3'> needs to be rep ...

javascriptjqueryhtmlcss

The Bootstrap 4 navigation bar fails to be responsive and remains open despite attempts at styling

Having trouble with my navbar functionality... After applying CSS styling, it loses responsiveness and remains open on smaller screens. Here is the code snippet. HTML: <nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="big-bar"> ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

htmlcssflexbox

Exploring the 3D Carousel Effect with jQuery

After creating a 3D carousel using jQuery and CSS3, I am looking to enhance it with swiping support. While there are plenty of libraries available for detecting swipes, I specifically want the carousel to start rotating slowly when the user swipes slowly. ...

javascriptjqueryhtmlcss