Avoiding conflicts with original CSS when implementing Mobile-First Media Queries

Suppose I have this CSS code:

.about_text {
  font-weight: 300;
  font-size: 1.125rem;
}

Then, I add a media query like this:

@media screen and (min-width: 64em) {
    .about_text {
        font-weight: 600;
        font-size: 1.500rem;
    }
}

Despite not using !important, the new styles don't override the original CSS. This issue seems unusual to me as I have experience using LESS in WordPress sites without encountering such conflicts before. I've made sure that the media queries are placed after the initial CSS rules.

csswordpressresponsive-designlessmedia-queries

Answer №1

To incorporate Cascading into your media query for utilizing specific CSS styles, consider the following example:

@media screen and (min-width: 64em) {
    div .about_section {
        font-weight: 700;
        font-size: 1.500rem;
    }
}

Answer №2

From what I can see, the code you have written appears to be correct. However, it is possible that there are other conflicting factors at play. One thing to consider is the triggering point of your media query.

It might be beneficial to change your form of measurement in your media queries from em's to pixels. Pixel measurements are absolute and typically result in more consistent outcomes compared to relative em units.

@media screen and (min-width: 480px) {
  .about_text {
  font-weight: 600;
  font-size: 1.500rem;
  }
}

Answer №3

Here is a suggestion:

.about_text {
font-weight: 600;
font-size: 1.500rem;}

@media screen and (max-width: 64em) {
.about_text {
  font-weight: 300;
  font-size: 1.125rem;      
}

}

The current media query seems to target only desktop or larger screens, not applying for mobile devices.

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

Conceal the navigation bar as the user scrolls, allowing it to disappear naturally instead of using animation

When it comes to hiding the navbar while scrolling, simply adding a class with "top: -50px" may seem like an easy solution. However, it doesn't provide a very natural experience. It would be much more seamless if the navbar disappeared as you scroll, ...

javascriptcssvue.jsnavbarnav

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

I recently added a scroll-to-top arrow using Jquery, and it's functioning flawlessly. However, I encountered an issue when I set body and html to a height of 100%, as it mysteriously disappears. View this fiddle for reference The HTML structure is a ...

javascriptjqueryhtmlcss

Tips for changing the size and color of SVG images in a NextJS application

Looking to customize the color and size of an svg image named "headset.svg". Prior to this, I used next/image: <Image src={'/headset.svg'} alt='logo' width={30} height={30} className='object-contain' /> The s ...

javascriptcssreactjssvgnext.js

Interactive Bootstrap Card with Popover Effect on Mouse Hover

Let's say I have a Button that contains the popover data toggle: <button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button> Here is the JS code ...

cssbootstrap-4popover

Transforming font sizes in mobile dp units to desktop px measurements

Yes, it's true - using px in css for specifying font-size is not ideal. However, in my case, I have a unique situation. I am currently developing a browser-based editor that is specifically designed for creating mobile content visually. The editor fe ...

cssresolutionfont-size

Achieving horizontal or vertical alignment of columns in Bootstrap 4 based on viewport size

Here is the layout I am working with - .left { height: 100vh; background-color: #208ea3; } .right { height: 100vh; background-color: #37a862; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="sty ...

htmlcsstwitter-bootstrapbootstrap-4

Designing a form within a div container while ensuring that the content remains contained

I've been struggling to perfect this formatting for quite some time now. While I've come across many similar examples to what I'm aiming for, I just can't seem to get it right. My goal is to create a form that will "popup" using JS for ...

htmlcssnested

Tips for assigning date ranges to arrays and then conducting comparisons with date input information

I'm developing an application with two date input fields. The current function I have calculates the sum of the digits in each field until it reaches a single digit, and then displays the result along with some text. Now, I need to create another fun ...

javascripthtmlcssfunction

Move object smoothly off screen without any delay

I have been experimenting with Animate.CSS and basic Jquery to add animations to elements coming on and off the screen. However, a problem I have encountered is that there is noticeable lag, especially when there is a background slideshow running simultane ...

javascriptjqueryhtmlcssanimation

The module named "tapable" does not contain an export for the item "Tapable"

While developing a WordPress plugin for a custom Gutenberg block, I encountered a challenge. I needed to incorporate additional scripts in TypeScript and opted to use "$ tsc --watch" along with a "tsconfig.json" file for compilation. Upon installing @word ...

wordpresstypescriptnpmwebpackwordpress-gutenberg

Placing a div on top of a link renders the link unusable

I am facing a situation and require assistance (related to HTML/CSS/JS) I currently have a div containing an image (occupying the entire div space) such that when hovered over, another div with an image is displayed on top (the second div is semi-transpar ...

javascriptjqueryhtmlcss

Invoke data-id when the ajax call is successful

Initially, there was a smoothly working "like button" with the following appearance: <a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span ...

javascriptjqueryhtmlcssajax

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

javascripthtmlcssangularjstwitter-bootstrap

The InfoWindow in Google Maps occasionally displays an unexpected scrollbar that appears briefly

My InfoWindows are not displaying correctly, as they show a scrollbar when they shouldn't (only on the first time)! I have multiple polyline routes on my page and I am adding a marker/InfoWindow for each route. This results in several markers being a ...

jquerycssgoogle-mapsgoogle-maps-api-3google-maps-markers

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

javascriptcssdjangodjango-templateshtmx

Ways to overlook concealed elements within a Bootstrap Button Group

Within my button group, there are 10 buttons. On certain screen widths, using media queries for responsiveness, I hide some buttons. The issue arises when the last button is hidden - the rounded edges of the succeeding visible button are not maintained. ...

csstwitter-bootstrap

Is JavaScript Gallery Acting Up? Possible Layer Glitch!

Seeking assistance with a website issue. I have an index.php file set up with a sideshow script in the head that appears on all pages. Additionally, within the index.php file, there is a portfolio.html page that displays a gallery script when loaded. The p ...

javascripthtmlcssgallery

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

cssbootstrap-4

What could be preventing certain child elements from rendering in the browser when using scss/ compiled css?

I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss&bso ...

htmlcssnpmsass