Embedding the @media tag directly into a class for simplification and to eliminate redundancy

For the complete css/html code sample, please visit: https://jsfiddle.net/menelaosbgr/jbnsd9hc/1/

Here are two specific definitions I am working with:

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;
}

@media screen and (min-width: 480px) {
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        bottom: 0px;
        right: -50px;
    }
}

I am looking to refactor the code for a more streamlined approach. I attempted the following, but encountered issues:

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;
    @media screen and (min-width: 480px) {
        bottom: 0px;
        right: -50px;
    }
}

In essence, how can I rewrite the code to avoid redundancy?

htmlcss

Answer №1

Validation is key. CSS alone can't handle media queries within rule-sets.

But fear not, as LESS or SASS can do the job and translate it to CSS seamlessly.

Answer №2

To add my perspective, I would like to share a practical example of various options you can consider:

Styling with CSS:

/* Dropdown Content (Initially Hidden) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;
}

Any adjustments for different screen sizes should be made within the appropriate media query instead of altering every single property:

@media screen and (min-width: 480px) {
    .dropdown-content {
        right: -50px;
    }
}

Using SASS/SCSS:

/* Dropdown Content (Initially Hidden) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;

    @media (min-width: 480px) {
        right: -50px;
    }

    @media (min-width: 768px) {
        right: -25px;
    }
}

Answer №3

To enhance efficiency, eliminate repetitive elements and focus on retaining unique attributes:

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;
}

@media screen and (min-width: 480px) {
    .dropdown-content {
        right: -50px;
    }
}

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

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

javascriptjqueryhtmlchildren

Is it possible for a div element to maintain a fixed position even as its size changes

Looking to adjust the size of a ruler? In horizontal mode, the ruler expands and contracts as you resize it. However, in vertical mode, the ruler shifts left as you shrink it and right as you expand it. You can resize the ruler by dragging the small r ...

jqueryhtmlcsshtml5-canvas

"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically. let adContainer = $ ...

javascripthtmljquery

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

csssassgulpgulp-sassgulp-minify-css

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

Using flexbox to evenly distribute images with borders and padding to ensure consistent height

Currently, I am utilizing jQuery to adjust the flex-grow value of a wrapper div based on the aspect ratio of a figure's image. This approach was suggested here. However, once I apply a border and padding to the figure, the images no longer retain the ...

jquerycssflexboxfigure

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

htmlcssangularjs

The white-space property disrupts the normal width of elements

My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...

htmlcssoverflowword-wrap

Utilizing ASP.NET with JavaScript to target elements by ID within an iframe

Struggling to populate my form within an iframe by inputting a value in a textbox and selecting an option from a dropdown menu. webform1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title ...

javascriptjqueryhtmlasp.netiframe

Tips for dynamically adding an external SVG animation to your website:

When trying to insert an animated SVG using jQuery or plain JavaScript, they appear static in Chrome and Edge, but display correctly in Firefox: $(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use> ...

javascriptjqueryhtmlsvg

Using `preventDefault()` will also block any text input from being entered

Note: I am looking for a way to clear the text box using the enter key after typing some text. My apologies for any confusion caused. Update 2: The missing event parameter was causing all the issues. I feel like a failure as a programmer. I am trying to ...

javascripthtmlpreventdefault

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

javascriptjquerycssajax

Tips for aligning content at the bottom center of a design

Could you assist me in positioning the buttons at the bottom center of the horizontal layout as depicted in the image below? Ps: the vertical layout at the top has a dynamic height. My HTML code is as follows: <html> <body> <div class="c ...

htmlcssvaadin

Unique float structure within a division of divs

Can divs be floated within another div like this? Here is the code: <div class="event_month"> <div class="event1">1</div> <div class="event2">2</div> <div class="event3">3</div> <div class="event4">4</di ...

css

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

javascriptjqueryhtml

Is there a way to embed an AJAX submit form into a notification without the need for page refresh?

I have integrated the jQuery plugin toastr js () for notifications on my website. I am facing an issue where I want to include a contact form within the notification popup and submit it using AJAX. Despite having the form working fine outside of the toastr ...

javascriptjqueryhtmlajaxtoastr

Utilizing CSS to Target IDs Using Classes

Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider... However, I now have a new idea. ...

htmlcss

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition

Can you designate a specific Google font for each language on a webpage?

Is there a way to use two different Google fonts, one for English characters and another for Thai characters, on a single page? While it's possible to achieve this using the @font-face syntax by specifying unicode character ranges, Google fonts do no ...

cssunicodegoogle-fonts

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...

javascripthtmljquerycsscanvas