CODEWITHSUNDEEP
htmlcssbootstrap-modal
Kenny Smith
Kenny Smith

Reputation: 889

HTML modal has 500 px max-width

I have this html code:

<!doctype html>
<html>
<head>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/index.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>


    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

    <script src="/static/index.js"></script>
    
</head>
<body>

<div class="container-fluid" id="content">
    <div id="suggestion_modal_content" class="modal">
        <div>

        </div>
         <a href="#" rel="modal:close">Close</a>
</div>

</body>
</html>

now, this is how the modal looks like (after I am adding text): enter image description here

when I use google dev tools, this is the modal element css values: enter image description here

when I remove the line max-width:500px, the page looks like I need (full screen).

I tried to add:

.modal{
    max-width: none;
}

but it does not work. What am I doing wrong?

Upvotes: 0

Views: 351

Answers (1)

Sean
Sean

Reputation: 8040

The jQuery Modal CSS is being included after your custom CSS. Because both stylesheets use the same selector (.modal) with the same specificity, the one that comes last in the cascade (in this case, the jQuery Modal CSS) overwrites the other's style.

You should change the order of the stylesheets in the <head> element, and ensure your custom styles always come after any vendor styles. This will allow you to overwrite vendor CSS while using selectors of the same specificity without having to use !important.

<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>

Upvotes: 1

Related Questions