How to make front page slider full width in Gallery Pro

[natasha]

I'm using the Gallery Pro theme. I've got a slider which I've placed in front page 1 area by using the Nextgen Gallery's add slider widget but it's not displaying as I'd like. I want it to take up the whole of the front page 1 area not just the middle bit.

I contacted the developer, Bloom, but they told me it was a customisation they couldn't help with. I'm hoping someone here can.

Here's the css from the Gallery Pro child theme relating to the front page 1 area and I would welcome any suggestions of what to change to make it display across the full area of front page 1.

/* Hero / Front Page 1 & 3
* ========================================================================== */

.hero,
.front-page-1,
.front-page-3 {
position: relative;
text-align: center;
color: #fff;
margin: 4rem auto;
}

.front-page-1,
.single .hero {
margin-top: 0;
}

.front-page-1 p,
.front-page-3 p {
max-width: 56rem;
margin-left: auto;
margin-right: auto;
}

.front-page-1 p:last-child,
.front-page-3 p:last-child {
margin-bottom: 0;
}

.front-page-1 h1,
.front-page-3 h1 {
font-size: 6rem;
line-height: 1;
font-style: italic;
}

@media only screen and (min-width: 800px) {

.hero .wrap,
.front-page-1 .wrap,
.front-page-3 .wrap {
display: table;
min-height: 40rem;
height: 1px; /* Fix for Firefox */
width: 100%;
}

.hero .wrap > *,
.front-page-1 .wrap > *,
.front-page-3 .wrap > *,
.front-page-3 .wrap .widget-area {
display: table-cell;
vertical-align: middle;
}

.hero h1,
.hero .entry-title,
.front-page-1 h1,
.front-page-3 h1 {
font-size: 7rem;
}

}

http://www.stevenbrake.com/

[Brad Dalton]

Firstly, you would need to add a wider image and then modify the CSS so there's no padding or margin.

Or

You could use this solution which i coded for a client recently.

---

Tutorials for StudioPress Themes.

[natasha]

This reply has been marked as private.

[Brad Dalton]

I don't get private messages. You can contact me here

---

Tutorials for StudioPress Themes.

[Author]

Posts