Styling 2-column home featured widgets in Sample

[StephanieTreasure]

I am trying to add a background image: http://hairlossclinic.stephanietreasure.com/wp-content/uploads/2014/05/rsz_background.jpg wrapped / behind 2 widgets I added to the home/static page of my website.

1. The image does not show
2. The widget area height is much higher than I would like
3. The right widget is pushing my contact way down

This is the code I have in the stylesheet:

/* Homepage Featured Area
------------------------------------------------------------ */
 
.home-featured-left {
    clear: both;
float: left;
    margin: 0 auto;
    width: 545px;
margin-bottom: 2rem;
font-size: 14px;
	line-height: 20px;
	overflow: hidden;
color: #000;
}

.featured-left .widget {
	/*padding: 7px;*/
}

.home-featured-right {
    clear: both;
float: right;
    margin: 0 auto;
    width: 415px;
margin-bottom: 2rem;
font-size: 14px;
	line-height: 20px;
	overflow: hidden;
color: #000;
}

.featured-right .widget {
	padding: 25px 0 20px 0;
}

.home-featured {
background-attachment: fixed;
background-color: #333333;
background-image: url("http://hairlossclinic.stephanietreasure.com/wp-content/uploads/2014/05/rsz_background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}

.home-featured .wrap {
min-height: 372px;
}

All I want is a video on the left and Opt-in form with some text on the right. Can someone help?

http://hairlossclinic.stephanietreasure.com/

[Brad Dalton]

I wrote about this last week which should help you http://wpsites.net/web-design/2-column-widgets-inline-for-slider-genesis-e-mail-subscribe-form/

---

Tutorials for StudioPress Themes.

[Tom]

Remove the clear:both; statement in .home-featured-right to allow the Aweber form to float next to the video. Experiment with also removing float: right; to reposition the form.

.home-featured-right {
/* clear: both; */
float: right;
margin: 0 auto;
width: 415px;
margin-bottom: 2rem;
font-size: 14px;
line-height: 20px;
overflow: hidden;
color: #000;
}

Your background image does not appear because you have attempted to locate it in .home-featured when this element is not part to the page markup (you haven't created it). This would be useful to hold the featured left and right image areas and the image behind them.

Edit: Yes! Using Brad's suggestion (that I didn't see while I was off in the middle of writing this 🙂 )

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts