Search code examples
javascriptcsstwitter-bootstrapwebads

How to generate a test ad to check if the div width is enough for the ad?

I want to achieve a layout like this for a post details page, there is a title, below the title some text, then a image, and below the image the post text. At right I want to show a ad and below some popular posts.

Doubt: The layout is working fine, my doubt is if there is some way to generate a example of a ad to put in the layout where is the text "How to put here a test ad just to check if the size is appropriate?" to check if the size of the div with the class .col-3 is enough to have the ad.

Example with the layout: http://jsfiddle.net/t1cLb3uq/

enter image description here

HTML:

<div class="bg-white">
  <div class="container py-4">
    <div class="row">
      <div class="col-9">
        <div class="article_details_title mt-3">
          <h1 class="font-weight-bold text-custom-blue-dark2">Example title test for test post</h1>
          <p class="article_details_clue">Some text.</p>
        </div>
        <div class="article_details_img mt-3">
          <img src="https://via.placeholder.com/768x350" alt="">
        </div>
        <div class="article_details_text">
          <p class="article_details_text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui  Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.</p>
        </div>
      </div>
      <div class="col-3 ml-auto">
        <div class="bg-custom-light2 p-0">
          <h2 class="font-weight-bold populars h5 text-center  py-3 m-0 rounded-0">
            Popular</h2>
          <ul class="list-group list-popular-category border-0">
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
Solution

  • You're setting a min-width: 300px on your .ads class in CSS. But you're also using the grid to set col-9 and col-3. So you're basically saying, the left col should take 75% of the width and the right col should take 25%.

    However, because you're setting the min-width to 300px, that takes priority.

    If you have a container that's 1000px wide, the first col will be 750px. Since there's only 250px of room left, your min-width declaration will guarantee that the right col will always be at least 300px, so the col has to fall down.

    If you remove the ads class on that div, you'll see the column now fits. But that doesn't solve your problem about having 300px for your ad.

    If you absolutely need 300px all the time, you'll have to adjust your layout responsively with responsive grid classes, maybe having the other div only half as wide up to a certain screen size; or maybe using a single column layout up to a certain screen size.

    Read up on that here: https://getbootstrap.com/docs/4.1/layout/grid/