Altitude pro front page widget area 2 with 3 responsive images

[gpolodesign]

Hello,

I've set up three images in the front page 2 widget area and I would like to know if they can be responsive in this way:

1) they expand to full screen when the screen is expanded
2) they stack only when they are in mobile size
3) never a border

Thanks!

http://taprootgrow.com/construct/

[Tom]

Hi,
It appears that you've clobbered the theme styling lines 1219-1304. You can fix this with the following CSS, adding your max-height rule at the bottom. (an FYI, your overall idea may not look as intended on shorter screens)

.front-page-1 {
    background-attachment: fixed;
    background-color: #fff;
    background-position: 50% 0;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    max-height:  550px;
}

Add this for your FP-2 images:

.front-page-2 .widget-area .wrap {
	max-width: 100%;
	padding: 0px;
	margin:  0px;
	border:  none;
}

.front-page-2 img {
	width: 100%;
}

Add this for appearance on mobile:

@media only screen and (max-width: 640px) {

.front-page-2 .one-third  {
	clear: both !important;
	width:  100%;
	line-height: .6;
}

Adjust as necessary.

(Skip any links embedded in these snippets, they're being added by the forum, not me!)

---

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

[Author]

Posts