Divs condensed to left of section in my site

3 Views

There is a section in my site that displays 3 boxes of text with a link underneath (pic below).

enter image description here

Read More

I am optimizing the site for smaller screen sizes. When I open the site on my 13 inch macbook pro, the section looks like this (pic below).

enter image description here

I can’t seem to figure out what is causing this issue. I am posting the HTML and CSS pertaining to it below. Any advice is much appreciated.

HTML: 

<section class="success-stories group">

    <?php 
      $args = array(
        'post_type' => 'success',
        'posts_per_page' => 3,
        'order' => 'ASC'
      );

      $query = new WP_Query($args);

      $i = 1;
    ?>

    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <div class="success-stories-div">
        <div class="success-stories-text">
          <p style="font-size: 120%;">Success Story</p>
          <?php the_content(); ?>
        </div>
        <a href="<?php the_permalink(); ?>">
          <div class="success-stories-link<?php echo $i; ?>">Hear More >
          </div>
        </a>
      </div>
      <?php $i++ ?>
    <?php endwhile; wp_reset_query(); ?>
    <div style="cursor: pointer" class="more-arrow">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/success_right_arrow.png">
    </div>
</section>

CSS: 

.success-stories {
  width: 100%;
  margin: 25px 0 0 105px;
  }

  .success-stories .success-stories-div {
    display: inline;
    margin: 0 6px 0px 6px;
  }

  .success-stories .success-stories-text {
    padding: 20px 75px 20px 20px;
    width: 100px;
    height: 200px;
    background-color: #F6F3F0;
    color: #093333;
    margin-bottom: 1em;
  }

  .success-stories .success-stories-link1 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #F4B147;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-link2 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #2D8482;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-link3 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #8F0063;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-div a {
    color: #FFFFFF;
  }

  .success-stories .more-arrow {
    display: inline-block;
    float: left;
    padding: 140px 0 0 25px;
  }

  .success-stories .more-arrow img {
    height: 40px;
    width: 40px;
  }
Post Views: 3

Related posts

1 comment

  1. You need to specify the width for the success-storie-div elements and set them display as inline-block (in order to horizontally center them – you’ll have to add text-align: center to the parent element too).

    Considering the following example HTML:

    <div class="row">
    <div class="col-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices metus quis lacus suscipit pellentesque. Sed eu mollis magna. Suspendisse tristique enim a pretium tempus. In non urna ac nisl porta bibendum. Fusce pellentesque laoreet elit nec scelerisque. Curabitur dictum condimentum tincidunt. Vestibulum vitae rhoncus diam. Morbi sed dolor quis mauris posuere euismod. Nulla lobortis suscipit elementum. Donec eget volutpat urna. </div>
    <div class="col-3">Mauris vehicula dictum nibh a rutrum. Sed interdum, ex in facilisis euismod, enim ex vestibulum nulla, sit amet feugiat nisl nisi eu orci. Sed in diam et turpis ultricies sagittis. Cras molestie leo eget eros vestibulum vulputate. Donec arcu mi, efficitur vitae tincidunt efficitur, interdum in ex. Fusce lobortis, est nec scelerisque ullamcorper, urna purus luctus nibh, non sagittis dolor leo nec ipsum. Integer in mauris sit amet eros dignissim tempus.</div>
    <div class="col-3">Cras a est ultricies, mollis augue nec, blandit quam. Phasellus consectetur nibh id justo faucibus interdum quis vitae diam. Donec pellentesque neque non imperdiet viverra. Ut sit amet leo metus. Proin sit amet est enim. Etiam ornare ipsum ex, a facilisis turpis sodales a. Aenean vel sodales dui. Proin ac risus ornare, tincidunt metus vel, iaculis lectus. Aliquam a mauris turpis. Nunc diam libero, porttitor venenatis sem a, blandit volutpat metus.</div>
</div>

    You need the following css to make them three responsive columns:

    .row {
    text-align: center;
}
.col-3 {
    display: inline-block;
    width: 32%;
    margin: 0 2%;
    text-align: left;
    vertical-align: top;
}
.col-3:first-child, .col-3:last-child {
    margin: 0;
}

    Don’t forget vertical-align: top on the columns so they stick to the top of the container.

    You’ll probably want to display them in full width on mobile, for that you can use the following media query:

    @media screen and (max-width: 768px) {
    .col-3 {
        display: block;
        margin: 0 0 20px;
        width: 100%;
    }
}

    Here is a fiddle illustrating this.

Comments are closed.