Menu icon Foundation
Full Width Question

I'm need the calls to action on my home page to be wrapped with a full width div so that I can change the color to tan behind them and span is full width. Can someone help me with what class I should wrap my code in please? I have added the code and here is the link to the site http://www.bloomingpaws.net/dev/

Thanks so much for all your help!!

<?php
/*
Template Name: Full Width
*/
get_header(); ?>

<!-- Row for main content area -->
    <div class="small-12 large-12 columns" role="main">

<?php putShowBiz("slider1") ?>
	
	<?php /* Start loop */ ?>
	<?php while (have_posts()) : the_post(); ?>
		<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<header>
				<h1 class="entry-title"><?php the_title(); ?></h1>
				<?php reverie_entry_meta(); ?>
			</header>
			<div class="entry-content">
				<?php the_content(); ?>
			</div>
</div>


<div class="contain-to-grid" style="background:#f1e6da; ">
<div class="small-12 large-12 columns" style="margin-top:30px; ">


<!--FIRST CALL TO ACTION-->
<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >CAREFREE GUARANTEE</h2>
<h3 class="cta-text" style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:small; padding-left:5px; margin-top:-8px; font-weight:bold; text-align:center; ">Vet Care is included with <br/> <span style="text-align:center;">Boarding & Day Care</span></h3>
<img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/vet-symbol.png" alt="vet-symbol" style="float:left; margin-top:-15px;">
<p style="float: right; width: 155px; font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-right:10px; " >The copy warned the Little Blind Text, that where it came from it would have been rewritten.</p>
<a href="http://www.bloomingpaws.net/dev/carefree-guarantee/" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:14px; float:right; margin-right:-100px; margin-top:110px; font-family:marcellus; font-weight:normal; ">LEARN MORE »</p></a>
</div><!--END OF 1ST CALL TO ACTION-->

<!--SECOND CALL TO ACTION-->

<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >FREE TRAINING INTRO<br/><span style="text-align:center; ">& RESORT TOUR</span></h2>
<p style=" font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px;  " >The copy warned the Little Blind Text, that where it came from it would have been rewritten.</p>

<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; " >Tour Times</p>
<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-15px; margin-left:5px;" >Tuesdays at 3pm</p>
<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-15px; margin-left:5px; " >Wednesdays at 11am</p>
<a href="#" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:14px; float:right; margin-right: 25px; margin-top:-10px; font-family:marcellus; font-weight:normal; ">REQUEST A TOUR »</p></a>
</div><!--END OF 2ND CALL TO ACTION-->



<!--THIRD CALL TO ACTION-->
<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >WE <img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/cat-heart.png" alt="heart" style="padding-right:2px;">CATS TOO!</h2>
<p style=" font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-1px; " >The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should.</p>
<a href="#" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:12px; float:right; margin-right: 25px; margin-top:25px; font-weight:normal; font-size: 14px; ">LEARN MORE »</p></a>
</div>
<!--END OF 3RD CALL TO ACTION-->

<!--FOURTH CALL TO ACTION-->
<div class="small-3 large-3 columns">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; font-weight:bold; color:#794400; text-align:center;" >VIRTUAL TOUR</h2>
<img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/vtour.png" alt="Take a Tour" style="margin-top:25px;  border: 1px solid #794400; margin-left:45px; margin-bottom:15px; " />
<p style="font-size: 14px; color: black; line-height: 16px; font-weight: bold; text-align:center; font-style:italic; font-family:marcellus sc; font-weight:normal;   ">Watch BloomingPaws <br/><span> in action!</span></p>
</div>
</div>






			<footer>
				<?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'reverie'), 'after' => '</p></nav>' )); ?>
				<p><?php the_tags(); ?></p>
			</footer>
			<?php comments_template(); ?>
		</article>
	<?php endwhile; // End the loop ?>

	</div>










		
<?php get_footer(); ?>
            

         

full widthdiv

I'm need the calls to action on my home page to be wrapped with a full width div so that I can change the color to tan behind them and span is full width. Can someone help me with what class I should wrap my code in please? I have added the code and here is the link to the site http://www.bloomingpaws.net/dev/

Thanks so much for all your help!!

<?php
/*
Template Name: Full Width
*/
get_header(); ?>

<!-- Row for main content area -->
    <div class="small-12 large-12 columns" role="main">

<?php putShowBiz("slider1") ?>
	
	<?php /* Start loop */ ?>
	<?php while (have_posts()) : the_post(); ?>
		<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<header>
				<h1 class="entry-title"><?php the_title(); ?></h1>
				<?php reverie_entry_meta(); ?>
			</header>
			<div class="entry-content">
				<?php the_content(); ?>
			</div>
</div>


<div class="contain-to-grid" style="background:#f1e6da; ">
<div class="small-12 large-12 columns" style="margin-top:30px; ">


<!--FIRST CALL TO ACTION-->
<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >CAREFREE GUARANTEE</h2>
<h3 class="cta-text" style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:small; padding-left:5px; margin-top:-8px; font-weight:bold; text-align:center; ">Vet Care is included with <br/> <span style="text-align:center;">Boarding & Day Care</span></h3>
<img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/vet-symbol.png" alt="vet-symbol" style="float:left; margin-top:-15px;">
<p style="float: right; width: 155px; font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-right:10px; " >The copy warned the Little Blind Text, that where it came from it would have been rewritten.</p>
<a href="http://www.bloomingpaws.net/dev/carefree-guarantee/" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:14px; float:right; margin-right:-100px; margin-top:110px; font-family:marcellus; font-weight:normal; ">LEARN MORE »</p></a>
</div><!--END OF 1ST CALL TO ACTION-->

<!--SECOND CALL TO ACTION-->

<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >FREE TRAINING INTRO<br/><span style="text-align:center; ">& RESORT TOUR</span></h2>
<p style=" font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px;  " >The copy warned the Little Blind Text, that where it came from it would have been rewritten.</p>

<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; " >Tour Times</p>
<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-15px; margin-left:5px;" >Tuesdays at 3pm</p>
<p style="font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-15px; margin-left:5px; " >Wednesdays at 11am</p>
<a href="#" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:14px; float:right; margin-right: 25px; margin-top:-10px; font-family:marcellus; font-weight:normal; ">REQUEST A TOUR »</p></a>
</div><!--END OF 2ND CALL TO ACTION-->



<!--THIRD CALL TO ACTION-->
<div class="small-3 large-3 columns" style="border-right:1px solid #f57b20; ">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; color:#794400; font-weight:bold; text-align:center;" >WE <img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/cat-heart.png" alt="heart" style="padding-right:2px;">CATS TOO!</h2>
<p style=" font-size: 12px; color: black; line-height: 16px; font-weight: normal; padding-left:10px; margin-top:-1px; " >The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should.</p>
<a href="#" style="font-weight:bold; "><p style=" color:#f57b20; font-family:Marcellus, sans-serif; font-size:12px; float:right; margin-right: 25px; margin-top:25px; font-weight:normal; font-size: 14px; ">LEARN MORE »</p></a>
</div>
<!--END OF 3RD CALL TO ACTION-->

<!--FOURTH CALL TO ACTION-->
<div class="small-3 large-3 columns">
<h2 style="font-size:medium; font-family:Marcellus, sans-serif; font-weight:bold; color:#794400; text-align:center;" >VIRTUAL TOUR</h2>
<img src="http://www.bloomingpaws.net/dev/wp-content/uploads/2013/12/vtour.png" alt="Take a Tour" style="margin-top:25px;  border: 1px solid #794400; margin-left:45px; margin-bottom:15px; " />
<p style="font-size: 14px; color: black; line-height: 16px; font-weight: bold; text-align:center; font-style:italic; font-family:marcellus sc; font-weight:normal;   ">Watch BloomingPaws <br/><span> in action!</span></p>
</div>
</div>






			<footer>
				<?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'reverie'), 'after' => '</p></nav>' )); ?>
				<p><?php the_tags(); ?></p>
			</footer>
			<?php comments_template(); ?>
		</article>
	<?php endwhile; // End the loop ?>

	</div>










		
<?php get_footer(); ?>
            

         
Shawn Hansen over 5 years ago

Hi Jennifer,

If I understand your question correctly, I think you just need to take them out of the row, i.e. don't put them in a div with a class of "row".

I did something similar with the footer on this site: http://www.uwosh.edu/beta

Rafi Benkual over 5 years ago

I think you are asking to make a button? You can make a button do this very easily and it is easy to style. We made an example on your second call to action: http://cdpn.io/dLygC

Click on edit this pen in the lower left to see code.