How to fix responsive image bug in wordpress?

  • Resolved augustomallmann

    (@whatsgoingonbr)


    5 years, 8 months ago

    I’m trying to make a responsive theme on wordpress. When i’m on a desktop resolution, the thumbnails are 100% adjusted to the card, but when i reduce the resolution to a mobile device, it gets bigger than the card. Why is it happening?

    I have already tried to add the bootstrap 4 responsive image class.

    <section id="blog" class="blog  d-flex align-items-center mt-5 mb-5">

  <?php query_posts('posts_per_page=3'); ?>

  <div class="container">
<div class="d-flex align-items-center">

 <h1>úLTIMAS<BR>PUBLICA??ES</h1> </div>    <div class="row">

      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="col-sm-7 col-md-4 mt-3">

        <a href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" class="rounded-top"></a>
        <div class="card-body border rounded-bottom">

          <h4 class="card-title border-bottom pb-3 "><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h4>
          <p class="card-text"><?php the_subtitle(); ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-outline-dark btn-sm">Continuar lendo</a>
        </div>

      </div>

      <?php endwhile; ?>

      <?php endif; ?>

    </div>
</section>

    expeted:

    View post on imgur.com

    reality:

    View post on imgur.com

    The thumbnail size configured on wordpress admin panel is 350 x273px

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • For Bootstrap 4, if you use card-body, card-title, so on, you need to wrap things inside “.card” class, and use .card-img or .card-img-top into the images used.

    So wrapp everything inside <div class=”col-sm-7 col-md-4 mt-3″> into <div class=”card”> and change class=”rounded-top” to class=”card-img” into the image. Like:

    <div class="col-sm-7 col-md-4 mt-3">
   <div class="card">
        <a href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" class="card-img-top"></a>
        <div class="card-body border rounded-bottom">

          <h4 class="card-title border-bottom pb-3 "><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h4>
          <p class="card-text"><?php the_subtitle(); ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-outline-dark btn-sm">Continuar lendo</a>
        </div>
   </div>
</div>

    Or you can just add “.card-img” to the img, this will add “width:100%;” to the image so it will never overflow content, but it will add border radius too.

    Or just add “style:width:100%; height:auto;” to the

    Or create a class for that.

    Thread Starter augustomallmann

    (@whatsgoingonbr)

    Hey, @arriba

    Thank you very much, it worked!

    Have a great day.

    Augusto, great, hey, u are from brasil? i′m from uruguay! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to fix responsive image bug in wordpress?’ is closed to new replies.

Tags