Unable to override Bootstrap margin tag with CSS in @media query

Whenever I try to adjust the margin top (mt-5) of a h1 heading tag in my HTML using an @media query, it seems that the other conditions are working fine except for the margin. Despite having my CSS sheet linked after the Bootstrap one.

I attempted adding a class to the h1 and targeting all h1s within that ID without success.

Check out the Codepen here: Codepen link

Here is the snippet of HTML:

<h1 class="mt-5 wcu-title">
    Why Choose Your Computer Assistant Ltd?
</h1>

And this is the MEDIA QUERY section of the CSS:

  #showcase-wcu h1 
  {
    margin-top: 10px;
    font-size: 30px;
    width: 60%;
  }
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Consider removing or replacing the mt-5 class in order to achieve better styling results. The mt-5 class has a predefined style of margin-top:3rem!important, which is important to note as it will take precedence even if you try to override it with another value using !important in a media query.

It might be more effective to use a different class altogether instead of mt-5. Alternatively, you could create a unique ID incorporating the mt/wcu properties and redefine it in your media CSS for better control over the styling.

Answer №2

It appears that the .wcu-title is being overridden by the mt-5 class in the media queries. To fix this, you can adjust the mt-5 tag within the media queries without affecting other elements with mt-5. You can use the code below to achieve this:

    @media (max-width: 600px) {   
        .wcu-title {
            font-size: 30px;
            width: 60%;   
        }   
        h1.wcu-title.mt-5 {
            margin-top: 10px !important;   
        } 
    }

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

Safari doesn't seem to recognize z-index property

Currently, I am utilizing a responsive template to develop a website. An issue arises in Safari where the footer overlaps the navigation bar at the bottom of the page, despite being positioned above it earlier. It appears that the z-index attribute is not ...

htmlcsssafariz-index

What strategies should be employed for effectively storing data in HTML for dynamic content?

I am currently in the process of developing a sleek, dynamic brochure website that can update content on button clicks through Javascript. Whenever the button is clicked, it triggers a function in the .js file to insert the new content into the HTML. To ma ...

javascripthtmljquery

Utilizing Bootstrap 4 Flexbox to Effortlessly Align Multiple Columns in Center Position

I am looking to vertically center 3 columns within the viewport. The columns should each take up the full width, and I want them stacked vertically with 'align-items-center' so that all three are centered vertically in the viewport. Take a look ...

bootstrap-4flexboxvertical-alignment

Assistance with Collision Detection in HTML5 Canvas using JavaScript

Attempting to create a platformer game using HTML5 and the canvas feature. I managed to implement collision detection with rectangles, but encountered issues when adding multiple rectangles. I have a function that adds new objects to an array with attribut ...

javascripthtmlcanvascollision-detection

Do all links need an href attribute?

I'm inquiring about this because I have specific links that function as buttons to retrieve content through ajax, eliminating the need for href tags. (This inquiry is driven by SEO considerations) ...

htmlhyperlinkseo

The Swiper slider is unable to display several views at once in the slider layout

I recently started using the amazing swiper slider plugin available here My goal is to replicate the demo-no-210 from that repository. Here is the code snippet I am working with: index.html <!DOCTYPE html> <html> <head> <meta ...

javascriptjqueryhtmlcssangularjs

Checkbox must be checked by default before sending to php

One aspect of my HTML includes a checkbox element: <input name="cb" class="cmn-toggle cmn-toggle-round" type="checkbox"> My understanding of how checkboxes function led me to believe that if the input is "checked," it would be set and exist, but if ...

phphtml

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

javascriptcssangularjs

What could be causing my dash/hyphen character to vanish when using JavaScript on my website?

I'm on a mission to swap out spaces with dashes or hyphens in JavaScript. I've managed to write most of the code that inserts dashes after each space between characters (without creating double dashes), but as soon as I add another character, the ...

javascripthtml

creating empty space below by expanding upwards

I have implemented some jQuery to make my div expand vertically, but it is causing a space below the div of equal height. I need this extra space removed. The specific div in question is the one connected to the footer and contains the content "ABOUT PEND ...

jqueryhtmlcss

Incorrect item triggered in Bootstrap 4 dropdown menu

I'm currently tackling an issue with a navigation bar that includes two items with drop-down menus. The first drop-down works flawlessly, but the second one always ends up triggering the first. I've conducted tests after removing any additional s ...

htmlcssbootstrap-4dropdown

Position the Bootstrap button at the bottom left with absolute placement

Currently, I am utilizing Django as my web framework and Bootstrap to enhance the rendering of the frontend. My goal is to implement an "add" button on my page that will always be in the bottom left corner regardless of scrolling, overlaying any other cont ...

htmlcsstwitter-bootstrapbootstrap-4css-position

Showing objects based on the proportions of the container

I am currently working on a component that will be utilized in numerous widgets within our web application. Is there any method to adjust the visibility of elements based on the size of a div? <div class="container" style="width:100%"> <div> ...

cssangularjshtmldom

Getting data from JavaScript modal dialog with HtmlUnit

Issue at hand: My current dilemma involves attempting to extract the text description and form that appear in a window above a website page when clicking on an image of a product. I am curious if it is achievable using HtmlUnit. Your assistance is greatly ...

javajavascripthtmlwebhtmlunit

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

On my website, I have 4 iframes embedded in 4 different tabs. I've noticed that the content is being cropped when viewed on Firefox, but it loads properly when using Chrome. Strangely, if I manually reload the iframe, the content displays correctly. T ...

javascripthtmlcss

Incorporate an external CSS file programmatically

Can I apply the SomeStyle.css CSS file to an aspx page from its code behind? ...

c#asp.nethtmlcss

Inconsistent Responsiveness of CSS Search Bar

I'm currently in the process of developing a mobile-friendly GitHub Homepage Clone using HTML and CSS, with plans to integrate JS at a later stage. My main focus right now is on refining the search bar functionality. However, I've encountered an ...

htmlcssflexbox

What is the best way to add a stylish border to an iframe?

My attempt to add a border to content on my WordPress site has been unsuccessful. Since I don't know how to add a CSS file, I've been trying to achieve this using what I believe to be HTML. My coding skills are limited to what I learned in high s ...

htmlcsswordpressiframeborder

Is it possible to drag the div container in HTML to resize its width from both left to right and right to left?

After posing my initial inquiry, I have devised a resizing function that allows for the expansion of a div's width. When pulling the right edge of the div to resize its width from left to right, is it possible to adjust the direction or how to resize ...

javascripthtmlcssangulartypescript

Creating a full-height application with CSS3 Flexbox and managing overflow

I'm currently working on an app that utilizes a traditional email layout similar to the one illustrated below. Using the new CSS3 flexbox model, everything was functioning perfectly until I added the feature for users to dynamically insert new items ...

cssflexbox