How to make landing page full width?

Tagged: full width background, full width page

This topic has 8 replies, 3 voices, and was last updated 8 years, 4 months ago by jonathonfowler.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
August 23, 2015 at 6:35 am #16288
jonathonfowler
Customer
Hi there,

I;m trying to add a slider to my landing page and I want it to be 100% width and height of the screen. The default landing page seems to have a fixed width container which prevents the slider covering the full screen.

How do i either tweak the landing page template to allow 100% screen coverage, or how do I create a copy of the default landing page then tweak the copy to allow the full screen cover.

See an example here: gallery example page

The example above doesn’t fill the entire screen.

I can get around this by using WP Supersized plugin, it does exactly what I require (see this example: http://www.jonathon.co/sample-photos/pre-wedding-photo-shoot-engagement-photos/ ) however this plugin hasn’t been updated for ages and is no longer supported – it also causes my admin area to slow down quite a bit).

Any help greatly appreciated!
August 24, 2015 at 1:39 pm #16302
jonathonfowler
Customer
Anyone? Wes? The default ‘full width’ seems to be 1140 pixels, but that’s not what I require. How do I make a page that is the same as the full width slider on Epik’s homepage, that’s what I mean by full width, not 1140.

Thanks!
August 24, 2015 at 9:23 pm #16304
Wes
Moderator
I’m taking a look at it now.

I’m not sure if there is an easy way to do it just yet, but let me do some research to check everything out. If I can’t find anything then you may have to hire a dev to create some custom code to get this working. But let me take a look at a few things first.
August 24, 2015 at 9:38 pm #16305
Wes
Moderator
As far as the extra spacing and fixed width, I collected all of the code that you would need to remove/change and get rid of the extra padding/margin and fixed width in certain areas. Just add this to your CSS –
```
.epik-landing .head-wrap {
	margin: 0;
}

.epik-landing .wrap {
	margin: 0;
	width: auto;
}

.epik-landing .breadcrumb {
	display: none;
}

.epik-landing .entry {
    background: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
```
Keep in mind this will affect all of the pages that use a landing template. So if you only want this to happen on this specific page, then you would need to change those classes to a custom class. Just make sure and add that class at the bottom of the page editor.

I’m not sure how to get the slider height to fill the entire screen, there should be something in the Slider’s settings that will allow this. If not, I’d probably search the Plugin Developers forum, or just ask them directly. Hopefully it’s something simple.

Once you can get the slider to be full width and height, the code I posted above will take care of the other parts of the site that limit the video from being full width and height.
December 6, 2015 at 5:28 am #16819
jonathonfowler
Customer
Hi Wes,

I was working on this again and thanks for the info provided. It does wok, a little bit, but not fully.

I added the code and now the content sits on the left of the page, but doesn’t expand to fit the full screen width.

See my example test page here: http://www.jonathon.co/test-full-width/

I guess this only needs a little tweaking, can you help? What I want is the Justified Image Grid to expand to fit the full width of the screen on any device, and to be responsive to fit any screen size.

If I add the Justified Image Grid shortcode to Slider Wide on my homepage then I get the effect I want perfectly, but I’d prefer to be able to do this on a landing page.

Many thanks!
December 6, 2015 at 7:48 am #16820
jonathonfowler
Customer
**RESOLVED**

I added the following

.epik-landing .wrap {
margin: 0;
width: auto;
max-width: none;
}

The line: max-width: none; fixes the width, now it’s full width. Cheers!
December 6, 2015 at 9:31 am #16821
jonathonfowler
Customer
One question though Wes, hopefully you can help:

My homepage is now full width using the fix noted previously, but my footer is also full width. How do I fix the footer to keep it at the previous width of 1040px (i think that’s the default width) while keeping the main content full width?

Homepage

Thanks!
December 6, 2015 at 11:54 am #16822
Andykev
Customer
```
.epik-landing .wrap {
	margin: 0;
    width: auto;
max-width: none;	
}
```
On this section, remove the “margin 0;” then the footers will align in the center.
Change to:
```
.epik-landing .wrap {
    width: auto;
max-width: none;	
}
```
December 6, 2015 at 12:30 pm #16823
jonathonfowler
Customer
Awesome as always, thank you 🙂
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘How to make landing page full width?’ is closed to new replies.