Text is not at center of column when using hiding elements code

user_12268469 0
Viewed 47

I trying to hide paragraph text and button when on screen smaller than lg, but the paragraph text is not centered when on lg screen or larger.

Screenshot of the problem: https://ibb.co/RhTt98k Full code: https://codepen.io/jl-joey/pen/KKMEPGE

p {
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  word-wrap: break-word;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row slim">
  <div class="col-lg-6 slim-content text-center">
    <h1>Rouge Pur Couture</h1>
    <p class="d-none d-lg-block">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

    <form class="d-none d-lg-block">
      <input class="redbtn" type="image" src="../image/wild/shopbtn-02.png" alt="imagebtn" />
    </form>

  </div>
  <div class="col-lg-6 product slim-img text-center px-5">
    <img class="img-fluid" src="../image/bestseller/slim.jpg" alt="" /> </div>
</div>

bootstrap-4 css html
1 Answers

As @freefall has said, I too see your code working as well but possible try adding these things just to cover some bases. Add text-center into the paragraph that's having the issue. like this:

<p class="d-none d-lg-block text-center">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

And possible add it into your CSS as well text-align: center;

So for a working example, maybe this:

p {
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  word-wrap: break-word;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row slim">
  <div class="col-lg-6 slim-content text-center">
    <h1>Rouge Pur Couture</h1>
    <p class="d-none d-lg-block text-center">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

    <form class="d-none d-lg-block">
      <input class="redbtn" type="image" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fdompict.com%2Fwp-content%2Fuploads%2F2017%2F07%2F27-Cats-Pictures-3.jpg&f=1&nofb=1" alt="imagebtn" />
    </form>

  </div>
  <div class="col-lg-6 product slim-img text-center px-5">
    <img class="img-fluid" src="https://www.sickchirpse.com/wp-content/uploads/2012/11/Cats.jpg" alt="" /> </div>
</div>

user_111111190
Related