`Unable to get SCSS media queries to properly set aspect ratio`

Just getting started with SCSS and trying to maintain high quality cover images on my website. The CSS seems to be working fine, but the SCSS is giving me some trouble.

SCSS

#page-login-index {
@media screen and (min-aspect-ratio: 5/4) {
    background-color: red;
}}

CSS 

@media screen and (min-aspect-ratio: 5/4) {
#page-login-index {
background-color: red;
}}

I really need to figure this out in SCSS since I'm pulling in some elements from PHP. It's strange that aspect-ratio and device-aspect-ratio are not cooperating, while min-height is working without any issues.

csssassmedia-queriesresponsive

Answer №1

Finally cracked the code.

After some trial and error, I discovered that

    @media (min-aspect-ratio: 5/4) {
        background-image: url('someurl');
    }

scss wrongly compiled it as (min-aspect-ratio: 1.25)

I had to store it as a string in a variable like: $aspect54 : "(min-aspect-ratio: 5/4)";

So, ultimately, it ended up looking like this

$aspect54 : "(min-aspect-ratio: 5/4)";        
@media #{$aspect54} {
            background-image: url('someurl');
        }

Answer №2

If you don't escape min-aspect-ratio: 5/4, it will result in failure because the sass compiler will translate it to min-aspect-ratio: 1.25

To prevent this, enclose the expression in quotes:

min-aspect-ratio: "5/4"

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 I achieve a full-width div without using the container-fluid class while still maintaining the width and structure of

I am looking for a full div without the container-fluid class while keeping the container width fixed. The structure of the container should not change as I need another div inside the container. The structure should remain as it is. .main { padding: ...

htmlcssbootstrap-4

What is the best way to display two radio buttons side by side in HTML?

Looking at my HTML form in this JSFiddle link, you'll see that when the PROCESS button is clicked, a form with two radio buttons appears. Currently, they are displayed vertically, with the female radio button appearing below the male radio button. I& ...

javascriptjqueryhtmlcssjsp

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

What is the HTML code needed to stack two divs on top of each other?

Many individuals seem to be inquiring about this issue, yet I am still unable to resolve it completely. The image I have linked closely resembles what I am aiming for. I would like the image in each section to flow from left to right, as it currently does, ...

htmlcss

A guide to implementing a SCSS color variable in a Material UI and Gatsby website

Trying to utilize a color variable from a SCSS file is causing an error: ERROR #98123 WEBPACK Generating development JavaScript bundle failed Invalid options object. Sass Loader has been initialized using an options object that does not match the API sc ...

sassmaterial-uigatsby

Error encountered while trying to access the NPM registry: http://registry.npmjs.org/sass - unable to fetch data

Earlier today, I accidentally deleted my project folder (/var/www/current/) due to a Git issue, and now I'm unable to perform a npm install. Is there anyone who can help me understand why it's failing to fetch sass from the registry? vagrant@lo ...

node.jsgitsassnpm

Fixed navbar at the top changes from absolute positioning to relative when scrolling

My goal is to dynamically change the position of the navbar from fixed to absolute as the user scrolls past 600px. Initially, I used the following code: if (scroll >= 700) { $(".navbar-fixed-top").addClass("navbar-scroll"); } else { $(".navbar ...

jquerycssnavbar

Is conditional CSS possible with NextJS?

While working on an animated dropdown for a navbar, I came across this interesting dilemma. In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when ...

javascriptcssreactjsnext.js

Issue: Inability to scroll on div overflow section

My website consists of one static page with an HTML and CSS file. Oddly enough, when testing the page and inputting content into a multiline textarea until it overflows, the browser fails to display a scrollbar. Despite inspecting the div with the id &apos ...

javascripthtmlcssbrowserscroll

The image slider is blocking the dropdown functionality of the navbar on mobile devices

My code is experiencing a conflict of events. I have created a menu bar using nav bar, as well as an image slider called the caroussel. The issue arises when the window is minimized - the menu bar fails to drop down properly with the presence of the caro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

csssass

Issues with loading an external CSS file in an HTML document

I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...

javascripthtmlcsshrefexternal

"Selecting the hue of an image on an input

Is it possible to easily incorporate color images into a design? I am struggling to find the property that will allow me to do so. There is a button that contains an image. .button { background: url('../image/arrow.png') 189px no-repeat ...

css

Creating personalized CSS for Sharepoint online site customization

While looking into supported and unsupported customization options and custom CSS for branding in SharePoint online, I found myself perplexed by the vague and confusing information provided by Microsoft's articles. Specifically, I was studying the ap ...

htmlcssdomoffice365sharepoint-online

Troubleshooting: Navbar Hover Effect in Tailwind CSS Not Functioning as Expected

This week, I've been working on building a navbar and it seems like the layout is coming together nicely. However, I've encountered a couple of small issues with the hover effect and the links for the menu items on the left and the logo in the ce ...

cssreactjsnext.jstailwind-css

Is it possible to conceal the dates from past months in the datepicker plugin?

Currently, I am utilizing a datepicker tool from jQuery UI and adjusting its CSS to suit my requirements. My goal now is to hide any dates that are not currently active, specifically those displayed from other months. I am unsure if this can be achieved ...

javascriptjquerycsshtmldatepicker

Fade in and fade out elements with jQuery using opacity in Internet Explorer

I have encountered an unusual issue in Internet Explorer involving a CSS Overlay used for a lightbox. The problem arises when I apply the fadein and fadeout effects using jQuery - everything seems to work smoothly except in IE. Instead of displaying a smo ...

jqueryhtmlcssinternet-exploreropacity

Display a progress bar that shows completion based on the maximum value supplied

I successfully created a progress bar using HTML, CSS, and Javascript. It functions perfectly up to a provided value of 100. However, if a value higher than 100 is given, the progress completes but the value continues to change until it reaches the maximum ...

javascripthtmlcssprogress-bar

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

htmlcss