CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector 

.container-fluid > .row > .d-flex > .out_profile
.

The CSS within the class out_profile is not rendering properly. To view the snippet, switch to small devices using the responsive mode.

@media (min-width: 576px) { 
    .container-fluid{
        display: none;
    }
    .container-fluid > .row > .d-flex > .out_profile {
        color: #662483 !important;
    }
 }
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" TYPE="text/css">
    <title>Document</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
                <div class="out_profile">
                    X
                </div>
                <span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
            </nav>
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</embed>
</html>

cssbootstrap-4

Answer №1

I removed the display: none and it appears to be working as expected - the text is now purple (refer to the example below).

However, I don't believe that 

.container-fluid > .row > .d-flex > .out_profile

is a very graceful css selector. If you are new to css, in most cases you would simply use:

 .container-fluid .row .d-flex .out_profile

You may even be able to omit some of the middle elements depending on your specific situation.

Furthermore, as pointed out by HereticMonkey, using !important in css code is rarely necessary, so it's likely not needed here either. I have retained it below just to demonstrate that the only change made was removing the display property.

@media (min-width: 576px) { 

    .container-fluid > .row > .d-flex > .out_profile {
        color: #662483 !important;
    }
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8></head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
                <div class="out_profile">
                    X
                </div>
                <span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
            </nav>
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

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

The Angular Table row mysteriously vanishes once it has been edited

Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete. A challenge arises when editing and saving a row causes it to disappear. Attempts were made ...

javascriptjqueryhtmlcssangularjs

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

Focus on a specific div element while bypassing its parent

Can I directly target the element with .div-3 class, even if its parent does not have an id or class? <div class="wrapper"> <div> <div> <div class="div-3"> </div> </div> </div> </div> I am aware ...

htmlcss

Troubleshooting regex validation issues in a JSFiddle form

Link to JSFiddle I encountered an issue with JSFiddle and I am having trouble figuring out the root cause. My aim is to validate an input using a regex pattern for a person's name. $("document").ready(function() { function validateForm() { var ...

javascriptjqueryhtmlcssjsfiddle

Tips for preventing the impact of angular mat-panel position changes on matdialog

In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...

cssangularsassangular-material

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

When bullet points are aligned in the middle of wrapped text instead of the top line

When using bullet points on my Joomla site for a long sentence that wraps to multiple lines, I noticed that the bullets align with the middle of the wrapped text rather than staying flush with the top line. For example, if the text wraps to 3 lines, the bu ...

css

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet: HTML <div class="meta-data"> <ul> <li><i class="fa fa-chevron-right fa-xs"></i><str ...

htmlcsshtml-lists

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected) https://i.sstatic.net/ZUi9z.gif Are there any kno ...

htmlcssgoogle-chromeiframesafari

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

csshtmltwitter-bootstrap

Exploring the possibilities of ReactJS and the sleek design of

How can I alter the background color of a RaisedButton without having the CSS class name appear in the autogenerated div? Here is the button: <RaisedButton className="access-login" label="Acceder" type="submit"/> This is the specified CSS: .acces ...

javascriptcssreactjsmaterial-ui

The function insertAdjacentHTML does not seem to be functioning properly when used with a

I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...

javascripthtmlcss

Center the HTML elements on the page

After struggling for some time, I can't seem to figure out how to center elements in the middle of a page without having a lengthy navigation bar at the bottom of the screen. Does anyone have any suggestions? https://codepen.io/picklemyrickle/pen/XWj ...

htmlcsselementcentering

What is the best way to implement a responsive layout in Bootstrap 5?

<body> <header> <nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319"> <div class="container-fluid"> <div class="navba ...

htmlcssbootstrap-5

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

javascriptjqueryhtmlcsswordpress

How to Implement Transition Effect for Height Changes on v-if in Vuejs

I have a code snippet that effectively animates a v-if element by reducing its height to 0px. The animation is working well, but the issue arises when I need to specify the initial height of the element in CSS. While this is fine for a single element, I ...

cssanimationvuejs2vue.js

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml