Sprinkle - How to Make the Slider Full Width

First, here is a screenshot of what we’ll be achieving:

sprinkle-sample

The first step is making the slider area wider and then resetting our slider settings to accommodate a larger image.

Look in your style.css file for:

.home-slider {
float: left;
width: 739px;
}

and change that to:

.home-slider {
float: left;
width: 100%;
}

All we did there was change the width of the space.

Now, you’ll want to navigate to Genesis>Slider settings and change your width setting to 1118px.  Feel free to adjust the height of this image to whatever your needs are. In order for your images to fill this space, you’ll want to make sure that when you load the image to your site that it is at least 1118px wide.  If the image you currently have loaded is at least that width, you can install and run the Regenerate Thumbnails plugin and it will re-crop those slider images for you!

The next step is to make some adjustments to the Home-CTA widget area where you can still place your newsletter subscription box and your social media icons.

So let’s look in your style.css file (Appearance>Editor) for:

.home-cta {
border: 1px solid #eee;
float: left;
height: 500px;
margin-left: 12px;
padding: 20px;
width: 365px;
}

and change that to:

.home-cta {
border: 1px solid #eee;
margin-top: 15px;
padding: 20px;
width: 100%;
}

All we did there was adjust the width so it would now extend across the screen and then adjusted the margin above it instead of to the left of it.  I also removed the float and height since we no longer need those to apply.

Next we are going to make the input form areas for the newsletter subscription box sit right next to each other instead of right on top of each other.

Look in your style.css and directly below the .home-cta code that we just adjusted above, we are going to add the following:

.home-cta .enews-widget input,
.home-cta .enews-widget input[type=”submit”] {
float: left;
margin-right: 10px;
width: 24%;
}

And lastly, let’s find this code:

.home-cta .widget {
padding-bottom: 20px;
}

and change it to:

.home-cta .widget {
clear:both;
padding-bottom: 20px;
}

There we just added the clear: both css so that it would allow us to add the social media icons underneath the subscription box.

And that’s it!