Full Width Image Slider

[William Allenbach]

I hope all is well! I would like to make the slider images on the Foundation theme home page the full width of the wrapper container – 960 px. I resized the width of the .flexslider class in the css file to 960px (in a child theme). I created an image that is 960 px but when inserted into a slide the image floats left and does not occupy the full width of the newly resized slider. Is there something that I am missing? Any help would be great! Thanks!

[Bill Robbins]

Hello William,

Great question there. You can change the width with just a bit of editing. Since you’re using a child theme already, I would suggest copying the page-home.php file from the parent theme and placing it in your child theme too. That way we can edit the home page without losing changes in an update. If you’d rather you can simply edit the parent theme. Either way the instructions are the same:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose page-home.php
3. Find this line:

   
   <?php the_post_thumbnail( 'slide' ); ?>
   

   and change it to this:

   
   (be sure to copy that from the support site and not the notification email)

4. The 960 in that snippet is the width of the image. The 506 is the height. You can adjust the height to fit your needs. That’s the height of the original slider.
5. Also while you’re editing there, remove this:

   
   <div id="sidebar">
   		
   	<?php dynamic_sidebar( 'home_top' ); ?>
   		
   </div>
   

6. Save your changes.
7. Next in your child theme’s style.css file, add this:

   
   #home-top .flexslider {
   	float: none;
   	display: block;
   	width: 100%;
   }
   

8. Save your changes.

I believe that should do it for you. If you have any questions, just let me know.

Thanks,
Bill

[Author]

Posts