x

Full width header images

Hello people,

I just started on a weebly site and it is turning out great. Now I got a problem, I have created a header which was made for full width. So it will cover the whole site from left to right, but everytime I try de header is only above the textfields (between the margins or something?)

Maybe there is a secret function or something what makes this possible?

Greetings kjell,

5,629 Views
Message 1 of 17
Report
16 REPLIES 16
Square

I'm not sure what you mean, @kjell. Did you want your header image to fill the entire page background?

5,618 Views
Message 18 of 17
Report

I'm sorry, I do not mean the whole background but just that it fits from left to right. so at both sides there is no more white.

gr kjell,

5,615 Views
Message 18 of 17
Report
Square

Which page of your site are you having trouble with? I checked the site in your account, but I don't see any white to the sides of your header images.

5,610 Views
Message 18 of 17
Report

We've got the same problem (http://www.tindoona.com.au)

Using theme purple haze which is supposed to be full width and I've previewed other themes but there is  a grey gap at the sides. I've played around with image sizes and just loaded one on the About page which is 2000 pixels wide based on advice I found on community page.

Thanks

Malene

5,411 Views
Message 18 of 17
Report
Square

It looks like you're using a custom theme right now, @Tindoona, and I don't see an option on the Theme tab to toggle full-width. Can you try switching to a different theme and trying again?

5,404 Views
Message 18 of 17
Report

Hi Adam

Strange that it looks like we are using custom theme as we changed it to Purple Haze about a week ago and the lay-out changed so it was definitely implemented.

I tried a few other themes that all advertise full width header images but most of them don't have an option to switch it on or off so assume it should automatically be on. Right now I think I went for Wag & Paws - Unite 2 which had a toggle so I switched it on but on my Macbook still have a grey area either side of the header image.

I don't like how the top menu on this theme is so short so I would like to go back to Purple Haze which I also found a bit easier in terms of CSS (I reduced some of the padding etc).

Thanks

Malene

5,389 Views
Message 18 of 17
Report
Square

Ok - we have a few members of our Community who are familiar with CSS who could make a recommendation on how to make it full width. @ThemezierThemes @BJ

5,386 Views
Message 18 of 17
Report

Thanks for the mention, @Adam!

@Tindoona There are a few reason why your header is not full width. The first is because there is a maxium width of 1366px applied to the container of your banner div. To make this full width, locate the code below in your CSS file:

.banner-wrap .container {
    max-width: 1366px;
    padding: 60px 40px;
}
And change it to this:
 
.banner-wrap .container {
    max-width: 100%;
    padding: 60px 40px;
}
 
Second, It looks like you're attempting to use the "Slideshow" element as a full sceen slider. To do this, you'll need to perform not just the step above, but you'll also need to upload images that are large enough to occupy the full width of the screen, and you'll need to modify the CSS of the "Slideshow" element.
 
To turn the "Slideshow" element into a fullscreen slider, check out this tutorial: http://weeblytricks.weebly.com/how-to-put-a-full-screen-slider-on-the-homepage-of-your-weebly-site.h...
 
Lastly, you may also need to adjust the left and right padding from the code I recommended above.
 
To sum everything up, if you're trying to make a fullscreen slider, use the tutorial I recommended. If you're just trying to expand the width of the banner div, then set the max width to "100%" and the left and right padding to "0".
5,364 Views
Message 18 of 17
Report

@Adam @ThemezierThemes

Thank you very much! The banner is now full screen thanks to your instructions (100% and 0 padding).

Will post an update once I've had a go at the slide show.

5,351 Views
Message 18 of 17
Report
Square

That's great, @Tindoona!

1,754 Views
Message 18 of 17
Report

The tutorial in the link does not work. Any chance of getting a fresh link?

I know this was posted a year ago, but shouldn't tutorials remain available for all?

Many thanks

1,580 Views
Message 18 of 17
Report

For those wanting a larger slideshow, in line with the logo and menu.

What I did was:

Remove the Header from the Home Page, as it restricts the size of the slideshow.

Download the POWr Multi Slider, as it seems the Weebly one does not expand.

Add a new Section from the Structure Menu, and add the POWr Multi Slider.

Lastly, go to the POWr editor by clicking on the Slideshow and make the plugin width 100%. Then play with the Relative Height to suit your images.

Done.

Hope this helps.

https://www.scotswoodarchitecture.co.uk/

1,578 Views
Message 18 of 17
Report

What if I'm not using Weebly Designer?  I just have regular weebly - how do I resolve this same issue?  I'm assuming just by picking the proper Theme, but that's like shooting in the dark.  I've gone through at least a half dozen and each looks good in editor, but once published... same issue. All this white space to either side of my image. 

1,508 Views
Message 18 of 17
Report
Square

When you are testing themes, make sure to check in Theme > Theme Options to see if there is a full-width option. Some themes have the option to display full width or not, and they might be defaulting to not-full-width.

1,506 Views
Message 18 of 17
Report

I'm finding this so frustrating. I'm trying to update my exusting site.  I like the "Cento' theme as it shows the Header image full width, but when I apply it to my site it displays within a limited width box.  If I create a new site using the the theme I get the result correct result (https://stevegaskinphotography.weebly.com), but on my existing site I can't see anywhere how to change the width to full width and obtain the Cento design layout.

website: http://www.stevegaskinphotography.co.uk

1,292 Views
Message 18 of 17
Report
Square

Hi @stevegaskin It looks like your site http://www.stevegaskinphotography.co.uk is using a custom theme. Do you remember if you edited anything in the html/css to make the sections full width? 

1,286 Views
Message 18 of 17
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.