Adjusting screen size does not update container padding

My attempt to remove the padding of a container on smaller screens using a media breakpoint is not yielding the desired result:

@media screen and (max-width: 576px) {
    .content-wrapper > .content {
        padding: 0;
    }

    .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}

https://i.sstatic.net/jY5j4.png

https://i.sstatic.net/gxn8G.png

Despite my efforts, the padding remains unchanged. What could be the issue here?

htmlcssbootstrap-4

Answer №1

To easily ensure that a style takes precedence, you can add !important after the value like this:

@media screen and (max-width: 576px) {
    .content-wrapper > .content {
        padding: 0 0 !important;
    }

    .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

If you prefer not to use !important, you should also specify values for larger screens. For instance:

@media screen and (min-width: 577px) {
    .content-wrapper > .content {
        padding: 10px 10px /*Or Whatever value you need*/;
    }

    .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
        width: 100%;
        padding-right: 10px 10px /*Or Whatever value you need*/;
        padding-left: 10px 10px /*Or Whatever value you need*/;
    }
}

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

Populate a secondary dropdown menu using the selection from a primary dropdown menu and retrieve the corresponding "value" instead of displaying the value as a dropdown option

I am attempting to create two dropdowns that are populated by another dropdown. Below is the code: HTML: <form type=get action="action.php"> <select name="meal" id="meal" onChange="changecat(this.value);"> <option value="" disabled select ...

javascriptarraysjsonhtml

Strategies for decreasing padding or margin in Bootstrap without removing it

I am currently facing a dilemma with the grid system. Although it is supposed to be easy, I am struggling at the moment. Let's consider that I need to correctly implement the Bootstrap grid for this example: https://i.stack.imgur.com/33vse.png Initi ...

htmlcsstwitter-bootstrapbootstrap-4

I am unable to view the input appearing inside the input box on my React/HTML application

I have been developing a React app for building portfolios, but I am facing an issue where I cannot see any text that I type into my input boxes. Can someone please help me troubleshoot this issue? Any assistance would be greatly appreciated. I have made ...

javascripthtmlreactjs

collapsed icon sliding over navigation slider in mobile Bootstrap 4

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded justify- content-center"> <div class="container "> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria- ...

htmlcssbootstrap-4

Intermittent functionality observed with jQuery mobile swipe feature

I have implemented swipe events using jQuery mobile 1.3.2, where I slide the note_container left/right with each swipe. However, I am facing issues with the swipe event registration on Samsung Galaxy S3 and other android devices, as it is intermittent and ...

jqueryhtmljquery-mobilemobile

The localization feature in jQuery mobile is causing the button style to disappear

For my current project, I am utilizing the jquerymobile framework along with the i18Next localization library. Here is the HTML code snippet: <div id="messageboxPage" data-role="page" data-theme="a"> &l ...

jqueryhtmlcssjquery-mobilei18next

What is the method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this: <div id="left"> <div id="menus" runat="server"> <div id="left_menu"> <div class="abc"> < ...

asp.netcss

The button is not properly connected to the input

My dilemma involves attaching the clear button to the search input field, resulting in an unexpected outcome: https://i.sstatic.net/igkpx.jpg The issue seems to be linked to the "Black Dashboard PRO" theme that I am currently using. <form> < ...

htmlcssbootstrap-4

Removing HTML tags and then reapplying HTML tags Part 1

Attempting to convert the following string: <p> string <b> bold <em>italic string</em> also(bold) </b> </p> to this modified string: <p> string </p> <!----------- ...

phphtmlregex

Having trouble getting two form fields to align horizontally in CSS

I am trying to arrange two form fields side by side horizontally, but I am having an issue where the second field is slightly lower than the first field. I am currently using display:inline-block in the CSS to achieve the horizontal alignment. Below is th ...

formsalignmenttextfieldcss

Unexpected date format displayed by the flat picker calendar

The expected date format is "DD-MM-YYYY" but the shown date format in the UI is "YYYY-MM-DD". Click here to view the UI image Initially, before opening the date picker, the date is displayed in the expected format as "DD-MM-YYYY". Upon opening the date p ...

htmltypescriptflatpickrangular-slickgrid

Swapping a Cube Mesh for a Car Mesh in ThreeJS

After developing a 3D cube that moves on one axis simulating the accelerometer sensor, I encountered errors when attempting to replace it with a car mesh. The errors are persistent and related to object definitions: https://i.sstatic.net/iTbGI.png Even t ...

javascripthtmlthree.jsmesh

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

One div on Chrome for Mac is experiencing an issue with applying the background image

I currently have a website hosted on GitHub pages at this link: When viewing the site on Windows Chrome, the bottom div containing the filtering buttons blends seamlessly with the dark grey background set in the wrapper div. However, when viewed on Mac Ch ...

javascripthtmlcsswebd3.js

The CSS table is not displaying the border on the last td when using the nthchild() function

My goal is to display the table td's with alternating borders - one with a border and one without on the bottom. Everything seems to be working fine except for the last td of the table, where the border-bottom does not appear. Additionally, the issue ...

htmlcssinternet-explorer-8css-tables

The CSS overlay effect refuses to shut down

Greetings everyone, I'm new around here so please bear with me. I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjustin ...

jqueryhtmlcssscrolloverlay

Enhance Prime-ng dropdown child elements with customized styling

Currently, I am attempting to apply styles to elements within a PrimeNG dropdown. These particular styles are associated with child elements nested within the p-dropdown tag, and I am unsure of the proper method to target them. Below is a snippet of the co ...

cssprimeng

How can I extract the text within a Span tag using Selenium WebDriver?

Is there a way to retrieve the text from a span tag and print it using Selenium Webdriver? I am looking to extract the text UPS Overnight - Free The HTML code is as follows: div id="customSelect_3" class="select_wrapper">> <div class="select ...

javahtmlseleniumselenium-webdriver

Preventing a particular CSS file from being applied to my Angular component

Currently, my modal component is built using bootstrap, but we encountered an issue with our project's CSS file which also utilizes the same classes as bootstrap (.Modal, .Modal-header). This conflicting styling was causing problems for the design of ...

cssangularbootstrap-4bootstrap-modalangular12

A convenient method for converting horizontal columns into vertical columns on mobile screens without using <div> tags or setting a minimum width, perfect for email formatting

After experimenting with using <div> elements and applying a min-width attribute to an email, I have come to the conclusion that these methods do not yield satisfactory results. While the alignment of horizontal columns works well on desktop screens, ...

htmlresponsive-designhtml-email