The 1920px minimum width is not triggering as expected

When using @media screen and (min-width: 1920px), the style is not applied until the min-width is changed to 1396px on a 1920x1080 screen. Despite accounting for the scroll bar size, the issue persists.

It seems unlikely that any other CSS is overriding this block, as it is the last one in the file.

CSS:

The default styling for h1 element:

h1 {
    font-family: 'leaguegothic';
    color: #d2ff00;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 25%;
    margin-top: 40vh;
    font-weight: 100;
}

The override for screens with a width of 1920px or more:

@media screen and (min-width: 1920px) {
    h1 {
        font-size: 200pt;
        font-style: italic;
        line-height: 50pt;
    }
}

HTML:

<h1>CREATIVE<br>DIGITAL<br>DESIGN</h1>

Full Source Code:

https://jsfiddle.net/9evuv1z9/

Answer №1

The issue was resolved by adjusting the Windows desktop scaling back to 100% from the previous setting of 125%

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

Sending a post request to a Spring controller with ajax: Step-by-step guide

I am having trouble sending a post request to the spring controller using ajax. It seems that something is not working correctly. If anyone can help me figure out what I did wrong, I would greatly appreciate it. $("#myprofile").on('submit&ap ...

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

Obtain and display pictures in HTML

I am working on a code snippet that fetches images from a directory and displays them in HTML. The issue I'm facing is that the images in the directory keep changing every second, causing problems on mobile browsers where the cached images are not bei ...

Guide on accessing a method from a div element in VueJS

Is there a way to only render a div based on a specific condition and call a method when the condition is true? Here's an example of what I'm trying to achieve: <div v-if="timetable === null" @click="mymethodhere"> ...

Guide to displaying options in the Vue material select box even when the default value is blank

I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...

Modify the color of the menu in OpenCart 1.5.6.4 to give it a fresh

In the default theme of OpenCart 1.5.6.4, I am looking to change the background color of the dropdown menu which is currently defined by the background image 'menu.png' to a custom hex value. The CSS code for this section is shown below: #menu & ...

Make sure the div can grow in height as needed, but if it reaches the limit of its container, it

UPDATE: I've created a JSFiddle for testing purposes. Below is an example of what I aspire to achieve (with Bootstrap 4 rows and columns): https://i.sstatic.net/hfXno.png The page should only display scrollbars if the second row is fully compress ...

Utilizing margins in CSS for various div elements

Update: I have included Javascript and Masonry tags in my project. Despite having modules of the same size, I am exploring how masonry can assist me. However, I find it a bit puzzling at the moment as I am not aiming to align elements of different sizes. I ...

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

How can I design a horizontal button menu with submenus below the navigation bar in Bootstrap 4? Take a look at the image below to see what I'm aiming for: https://i.sstatic.net/j6b8a.png https://i.sstatic.net/rmtrM.png If you have any ideas or su ...

Align watermark content to the far left side

Having trouble getting my watermark to align properly on the left side of my website's main content. Here is how it currently looks: https://i.sstatic.net/Nfhh5.png The issue arises when I resize the screen or switch to mobile view, as the watermark ...

Troubleshooting issues with IE conditional statements

I am struggling with incorporating 3 different stylesheets for Internet Explorer versions IE6, IE7, and the standard style.css. This is what I currently have: Unfortunately, tools like browserlab, ietester, and browsershots are not recognizing my conditio ...

The context menu materializes the instant the cursor hovers over it

The right-click context menu keeps appearing at the top of the page before clicking, even though I have set display: none in the CSS. $(document).on('mousedown', function(event) { if (event.which == 3) { $('#context').css({ ...

Combining the elements p and div on a single line

I've designed a card layout with 3 rows containing a paragraph and a div element each. I want both elements in each row to be displayed on the same line. How can I achieve this? Sample HTML: <div class="user_card"> <div class="skills"&g ...

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

Retrieve XML data and convert it into a JavaScript array, then extract the values and display them

After searching for a while, I have come across similar solutions but not exactly what I need. I am attempting to transform this XML snippet: <?xml version="1.0"?> <document name="New Document"> <url>http://nsc-component.webs.com/Of ...

Tips for concealing text within navbar components for various screen sizes in Bootstrap 4

Is there a way to hide certain elements of a bootstrap navbar inline without creating new elements for each screen size? I attempted using a span, but it caused the line to wrap. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

Ways to avoid grid overflow

As a newcomer to CSS grid, I am struggling to understand how to prevent components from overflowing a grid. The section in question, with the class name of profile-widget-wrapper, is defined with grid-row:2/4 but is overflowing the grid. Can anyone provide ...

Modifying the alignment of Angular elements within the router-module to complement an established CSS grid

I'm facing an issue with my angular reactive-form project. I have successfully set up everything except routing. After defining all the routes in the app.module.ts file, things started getting messy. In my basic form, I had a responsive CSS grid with ...

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

Navigating the waters of adding a CSS property to a jQuery variable pseudo selector

Is there a way to adjust the top position for $myClass both before and after? I attempted to do so with the following code: var $myClass = $(".myclass"); $myClass.filter(":before,:after").css("top",-23); ...