Flexbox is resetting / overriding / changing all my defined CSS Rules for fonts. I don't know w-CodePudding

I've just started learning CSS flexbox. So I was trying to create a popup modal that requires alignment of three divs side by side and I was able to achieve it using flexbox. But I'm facing a problem:

Flexbox CSS rules are overriding or changing my font-family CSS rules. On removing them I'm able to see all text and paragraphs changing back to defined font family but on including them it's somehow automatically changing the fonts.

This is how the fonts should look like (without flex). But on running the code given below you'll notice that it's ignoring all CSS rules for fonts even after using !important (includes flex).

Please check my comments in CSS to find the part to be removed.

Please run the code below.

$(document).ready(function() {
  $("#myModal").modal('show');
});

/* CSS For Flex & Structure */


/* PLEASE REMOVE THIS PART to see the real change in fonts. */


/* START REMOVING FROM HERE */

.wrap_modalrow {
  display: flex;
  flex-wrap: wrap;
}

.wrap_modalcat {
  flex: 1 1 100px;
  padding: 10px;
}

.wrap_modal {
  height: auto;
}


/* CSS rules for Body Structure */

.tyg-modal {
  text-align: center !important;
}

.modal-dialog {
  border: 6px solid #FFEEF4 !important;
}

.modal-content {
  border: none !important;
  background-color: #FFFFFF !important;
}


/* STOP REMOVING */


/* Text & Font Styling rules */

@import url('https://fonts.googleapis.com/css2?family=Alegreya Sans SC:wght@100;300;400&display=swap');
.modal-title {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 68px;
  margin: 0px !important;
  font-weight: 250 !important;
}

.p-thin {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 300 !important;
  font-size: 17px !important;
  color: #999999 !important;
  letter-spacing: 0.1em;
}

.p-bold {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  font-size: 19px !important;
}

.p-bold2 {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
}

.p-thinner {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
}

.p-bolder {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: bold !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
  margin-bottom: 6px !important;
  padding: 7px;
  background: #FFEEF4;
  border: none;
}

.p-bolder:hover {
  border: 2px solid;
}

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="tyg-modal">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <h5 class="modal-title">WELCOME</h5>
          <p class="p-thin">IT'S NICE TO SEE YOU!</p>
          <p class="p-bold">WHAT WOULD YOU LIKE TO BROWSE?</p>

          <div class="wrap_modal">
            <div class="wrap_modalrow">

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 1</h5>
                <p class="p-thinner">BUY XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 2</h5>
                <p class="p-thinner">SELL XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 3</h5>
                <p class="p-thinner">BUY ABC</p>
              </div>

            </div>
          </div>

          <button type="submit" class="close p-bolder" data-dismiss="modal">TAKE ME HOME</button><br/>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

If anyone can guide me about my mistake and how can I improve it then it will really help.

CodePudding user response：

Include the Google CSS import in your HTML

    <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC:wght@100;300;400&display=swap' rel='stylesheet' />

$(document).ready(function() {
  $("#myModal").modal('show');
});

/* CSS For Flex & Structure */


/* PLEASE REMOVE THIS PART to see the real change in fonts. */


/* START REMOVING FROM HERE */

.wrap_modalrow {
  display: flex;
  flex-wrap: wrap;
}

.wrap_modalcat {
  flex: 1 1 100px;
  padding: 10px;
}

.wrap_modal {
  height: auto;
}


/* CSS rules for Body Structure */

.tyg-modal {
  text-align: center !important;
}

.modal-dialog {
  border: 6px solid #FFEEF4 !important;
}

.modal-content {
  border: none !important;
  background-color: #FFFFFF !important;
}


/* STOP REMOVING */


/* Text & Font Styling rules */

@import url('https://fonts.googleapis.com/css2?family=Alegreya Sans SC:wght@100;300;400&display=swap');
.modal-title {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 68px;
  margin: 0px !important;
  font-weight: 250 !important;
}

.p-thin {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 300 !important;
  font-size: 17px !important;
  color: #999999 !important;
  letter-spacing: 0.1em;
}

.p-bold {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  font-size: 19px !important;
}

.p-bold2 {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
}

.p-thinner {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
}

.p-bolder {
  text-align: center !important;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: bold !important;
  letter-spacing: 0.1em;
  font-size: 19px !important;
  margin-bottom: 6px !important;
  padding: 7px;
  background: #FFEEF4;
  border: none;
}

.p-bolder:hover {
  border: 2px solid;
}

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC:wght@100;300;400&display=swap' rel='stylesheet' />
<div class="tyg-modal">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <h5 class="modal-title">WELCOME</h5>
          <p class="p-thin">IT'S NICE TO SEE YOU!</p>
          <p class="p-bold">WHAT WOULD YOU LIKE TO BROWSE?</p>

          <div class="wrap_modal">
            <div class="wrap_modalrow">

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 1</h5>
                <p class="p-thinner">BUY XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 2</h5>
                <p class="p-thinner">SELL XYZ</p>
              </div>

              <div class="wrap_modalcat">
                <img src="https://i.ibb.co/YbJv4RP/violet-purple-pink-logo-circle-png-favpng-QN3u0-WAnf-Sk-SUERjz-Ti-ERz-FGP-removebg-preview.png" alt="Girl in a jacket" width="130" height="130" />
                <h5 class="p-bold2">Category 3</h5>
                <p class="p-thinner">BUY ABC</p>
              </div>

            </div>
          </div>

          <button type="submit" class="close p-bolder" data-dismiss="modal">TAKE ME HOME</button><br/>
        </div>
      </div>
    </div>
  </div>
</div>

</html>