CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kiddo
Kiddo

Reputation: 1990

How to show text below image on small viewport?

I'm trying to display each image and its description on each half of the current browser screen. Here is my HTML:

<div class="container">
   <div class="row">
      <div class="col-6">
         <a href="#"><img src="images/img1.jpg" alt="" /></a>
      </div>
      <div class="col-6">
         <p>Here is the description</p>
      </div>
   </div>
</div>

When I resize and reach the mobile phone viewport, the image and text are still displaying on each half of the screen. How can I make them display on top of each other, i.e: the text should be displayed right below the image on the next line?

Upvotes: 0

Views: 635

Answers (3)

Diana
Diana

Reputation: 49

Use these breakpoints for mobile devices @media(max-width:600px) //for mobile devices @media(min-width:600px) //for laptop screens

Then use grid property refer: Grid property

Upvotes: 0

Lucas Arbex
Lucas Arbex

Reputation: 909

col-6 split the screen for every viewport. You should use col-sm, col-md, col-lg or col-xl, depending on which screen size you wish to add the grid breakpoint.

You can check more informations here: https://getbootstrap.com/docs/4.1/layout/grid/

Upvotes: 1

Chris W.
Chris W.

Reputation: 23280

You're using bootstrap, so just use the baked in responsive utility classes;

<div class="container">
   <div class="row">
      <div class="col-12 col-md-6">
         <a href="#"><img src="images/img1.jpg" alt="" /></a>
      </div>
      <div class="col-12 col-md-6">
         <p>Here is the description</p>
      </div>
   </div>
</div>

Upvotes: 0

Related Questions