CSS is hiding my HTML paragraph element when the page is loaded

1 year ago

#380204

class5cat

Why is css hiding my paragraph when I load the page on any browser?

Whenever I load the html page, the browser injects a display:none in my paragraph:

<p style:"display:none">

The following are my HTML and CSS:

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title - ID</title>
  <script src="jquery.js"></script>
  <!-- Fontawesome CDN -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Main Stylesheet -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Accordion assembly -->
  <script src="fase3-id.js"></script>

</head>

<body>

    <div class="container">
        <section>
        <h1 class="title">Title</h1>
        <h2 class="subtitle">Subtitle</h2>
        <p>
            some text        
        </p>
        </section>
    </div>

    <div class="container">
        <section class="accordion"></section> 
    </div>
</body>
</html>


   .title {
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        color: #000; 
    }

.subtitle {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: large;
    color: rgb(129, 129, 129);
}

.container p {
    font-family: 'Open Sans', sans-serif;
    font-size: medium;
    text-align: center;
    display: block;
    overflow: visible;
    color: rgb(129, 129, 129);
}

.accordion {
    margin: 5px;
}

.accordion article {
    margin: 5px;
    max-width: 35%;
    display:inline-block;
}

.accordion h2 { 
    background-color: #f0f0ed;
    color: #4c62f5;
    padding: 20px;
    width: 375px;
    margin: 0 auto;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    font-family: 'Open Sans', sans-serif;
    font-weight: 550; font-size: medium;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.accordion h2 span {
    font-size: x-small;
    float:left;
    margin-left: 20px;
    color:#929292;
}

.accordion img {
    float: left;
    margin: -16px auto;
    width: 50px;
    height: 50px;
    object-fit:scale-down;
}

.accordion h2:hover { 
    background-color: #78c7ee; 
}

.accordion h2:after { 
    font-family: FontAwesome; 
    content: "\f078"; 
    float: right; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
}

.accordion p { 
    padding: 10px;
    margin: 0;
    border-top: 0;
    font-family: 'Roboto', sans-serif;
    border: 0.5px #4c62f5;
    color: #929292; 
    font-weight: 300;
    background-color: #fff; 
}

.accordion span {
    font-weight: 600;
}

.accordion .active h2 { 
    background-color: #f8f85d; 
    color: #4c62f5; 
}

.accordion .active h2:after { 
    -webkit-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
}

.container { 
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding-right: 15px;
    padding-left: 15px;
    margin-left: 15%;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}

@media (min-width: 992px) { 
    .container { 
        width: 970px;
    } 
}

@media (min-width: 1200px) { 
    .container {
        width: 1310px;
    }
}

The only way I managed to fix it was to add an !important to the display: block; line.

I couldn't find any relation to the formating in the accordion that could somehow influence my paragraphs.

Is this a matter of overflowing? If so, what can I change to prevent it from happening?

html

css

display

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs