Check out my website here:
I am trying to introduce some spacing between each column element where the coupon ends and the following business name is displayed. It seems like adding a line break is causing issues with the layout. Here is the code snippet I am currently working on:
<?php
/**
* The template for displaying all pages marked home.
*
* This is the default template that displays all pages in WordPress.
* Keep in mind that other 'pages' on your WordPress site will use a different template.
*
* @package Smart Brands
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="hero-wrapper"> <!-- Start .hero-wrapper -->
<div class="hero container_12">
<img src="<?php echo $cfs->get('hero_image'); ?>" alt="img-hero-01" border="0" class="hero-image" />
<div id="call-to-action" class="grid_6">
<?php echo $cfs->get('hero_content'); ?>
</div>
</div>
</div>
<!-- End .hero-wrapper -->
<div class="feature-wrapper"> <!-- Start .feature-wrapper -->
<div id="features" class="container_12"> <!-- Start features -->
<?php
$fields = $cfs->get('features');
$i = 0;
foreach ($fields as $field) {
$i++;
echo '<div class="grid_8"> <!-- Start .feature --><div class="feature">';
echo '<a href="'.$field['feature_link'].'"><img src="' . $field['icon'] . '" alt="smartbrand icon" width="139" height="160" class="floatLeft feature-icon"></a>';
echo '<h4><a href="'.$field['feature_link'].'">'.$field['title'].'</a></h4>';
echo '<div class="mobile-text"><p class="justify">'.$field['text'].'</p></div>';
echo '<a href="#" data-reveal-id="coupon-modal-'.$i.'" class="coupon"><span><img src="'.$field['coupon_promo_text_img'].'" alt="" border="0" /></span><img src="'.$field['coupon_image'].'" class="responsive" alt="" />
<h1>'.$field['coupon_title'].'</h1></a>';
echo '</div><!- - End .feature - -></div>';
echo '<div id="coupon-modal-'.$i.'" class="reveal-modal">';
echo '<div align="center"><div class="coupon-border"><img src="'.$field['coupon_pdf_image'].'" class="responsive" /></div><a class="download-btn" href="'.get_template_directory_uri().'/download.php?
file='.$field['coupon_pdf'].'">Click to download</a></div>';
echo '<a class="close-reveal-modal">×</a></div>';
}
endwhile; // end of the loop.
?>
</div>
<!- - End container_12 - ->
</div>
<!- - End .feature-wrapper - ->
<?php get_footer(); ?>
Here is the CSS Stylesheet:
<?php
/**
* The template for displaying all pages.
*
* This is the default template that displays all pages in WordPress.
* Other 'pages' on your WordPress site will have a different template.
*
* @package Smart Brands
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template();
?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>