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.
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. Do you know how to test that?
Example with the layout: http://jsfiddle.net/t1cLb3uq/
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>
Aucun commentaire:
Enregistrer un commentaire