There is a section in my site that displays 3 boxes of text with a link underneath (pic below).
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).
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;
}
You need to specify the width for the
success-storie-div
elements and set them display asinline-block
(in order to horizontally center them – you’ll have to addtext-align: center
to the parent element too).Considering the following example HTML:
You need the following css to make them three responsive columns:
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:
Here is a fiddle illustrating this.