Class remains unaffected by media query modification

With Bootstrap5 in play and an additional stylesheet added as the last one in the lineup, my goal is to customize the margins of the .content class. The snippet of code below resides at the end of my stylesheet...

.content {
        width: 100vw;
        margin-top: 0;
        margin-bottom: 0;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
@media only screen and (min-width: 768px) { 
.content {
        width: 70vw;
        margin-left: 15vw;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: 15vh;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
}

The webpage utilizes <main class="content> to enclose the page's content.

My intended outcome is to have zero margins and a width of 100vw on mobile devices, but during testing, the media query's width and margins are applied even on mobile devices.

Can someone point out where I may have made a mistake?

**ADDED AS REQUESTED

    <meta charset="utf-8">
    <title>NC Commodities Conference of Soybeans, Corn, Small Grains, and Cotton Producers</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607e607c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
htmlcssbootstrap-5

Answer №1

It is necessary to switch the min-width property to max-width.

@media only screen and (max-width: 768px) { 
.content {
        width: 70vw;
        margin-left: 15vw;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: 15vh;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
}

With max-width, it means, "If [device width] is greater than or equal to 768px (as shown in the example), then do {…}".

@media only screen and (min-width: 768px)

On the other hand, with min-width, it represents, "If [device width] is greater than or equal to 768px, then do {…}".

Answer №2

Have you double-checked the order of your link tags in the html file where you include bootstrap.css and your.css for your project? It's important to ensure that you link your.css at the end compared to the other css files.

     <link rel="stylesheet" href="bootstrap.css">
     <link rel="stylesheet" href="your.css">

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

Remove the preset text in an input field by clicking on it

Looking for help: <input name="Email" type="text" id="Email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7fff3fbfed2f3f0f1bcf7eaf3ffe2fef7">[email protected]</a>& ...

javascripthtmlinputdefault-value

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

javascriptreactjscssmaterial-designmaterial-ui

A helpful tip for those working with jQuery or WordPress PHP: Use a script that calculates the number of characters in a text, identifies the last space, and replaces everything after

Is there a way to restrict the amount of text shown within a div sourced from a WordPress Custom Field? <?php $textcount = strlen(get_field('custom_quote')); ?> <?php if ( $textcount > 250 ) : ?> <?php the_field('custom ...

phpjquerycsswordpresscharactercount

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

css

What is the technique for enabling a mouse click in the vicinity of an element?

During a presentation on React at a conference, I witnessed the speaker introduce a feature that allowed users to click and drag a divider on the screen by simply getting close to it instead of having to click directly on it. This concept adds to usabilit ...

htmlcssreactjsusability

Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example: This particular website calculates value using a .js script embedded in the HTML itself. Upon inspecting the source code by pressing F12, we can locate the element containing the calculated valu ...

javascripthtmljquerycssreverse-engineering

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

htmlcssresponsive-designtablet

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

Modifying the image height in a column using Bootstrap and JSON data

My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...

javascripthtmljquerycssbootstrap-5

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

htmlasp.net-mvcvue.js

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

Modifying JavaScript Code in Inspect Element Editor

When I modify the HTML content using Chrome's Inspect Element editor, any changes made are immediately visible. However, when I make changes to the JavaScript code, the modifications do not take effect. For example, if I have a button that triggers a ...

javascriptjqueryhtmldom

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

Can anyone help me figure out what I'm doing wrong here? Essentially, I am trying to open a PDF in Google Viewer: <a id="pdflink" href="https://docs.google.com/viewer?url=http://pdpdpd.pdf" target="_blank">Pdf</a> When it opens in the vi ...

javascripthtmlcordovapdfexternal

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

javascriptphphtmlajax

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

cssangularjstwitter-bootstrap

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

What is causing my button to act in this way?

Initially, the website redirects to an undefined URL and then to test.com. I am looking for a way to implement a redirection sequence from to and finally to <head> <script type="text/javascript"> <!-- function popup(url ...

javascripthtmlfunctionpopup

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Currently, I am in the process of developing an HTML editor for a project. I have downloaded a program online that I am attempting to customize according to my requirements. However, I am encountering difficulties when trying to retrieve the inner HTML of ...

javascriptphpjqueryhtmlrich-text-editor