bootstrap ? responsive ? – make at least Header-Slider and Footer always screen-wide

[Wasserwerk]

Hello,
here is an example for what we want to achieve: http://www.forex21.com/
The header-slideshow and the footer is always screen-width no matter which devices or screen-resolution.

Some told me that bootstrap is the solution, which I have not worked with yet.
But first I want to know if Weaver has already a solution for that whish ?

On forex21.com there is no side-bar, at least on homepage we do NOT want a side-bar too,
but the content should behave as on forex21.com, means having a small screen or mobile-device,
everything goes one below the other, like Weaver does normaly with the Widgets in a side-bar, but we will not use side-bar.

[Wasserwerk]

currently I tried this:
body {padding: 0px;}
#wrapper {max-width: 100%;}
#main {width: 1280px;}
looks ok for that moment, or am I missing something ?
But how to organize content that switches one below the other on a page ?
Like widgets do.

[Joerg_Knoerchen]

Is that what you are looking for?

http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

I used this here:

http://www.sensorgrafie.de

[Weaver]

Weaver Xtreme can do any of that.

The link to the tips has examples of responsive columns for content.

Bootstrap is just an engine, and has no significant advantages or disadvantages over Weaver’s proprietary approach to layout. Bootstrap was not designed specifically for WordPress, but has been used as a library by a number of themes. If anything, it is less flexible than Weaver.

[scrambler]

For full width design, you should really consider moving to Xtreme as it has all this built in as explained in the tutorial referenced above.

For Weaver II pro, You do have the possibility to make the header and footer full width, using the options found at the bottom of Main Options > Header and Main Options > Footer. Both has the option to only extend the background or to alos extend the content.

Once you have that setup we can help with tuning

[Wasserwerk]

thank you very much for all your answers !
I will have a look on Xtreme …..What means “All licenses active for 18 Months – Discounted Renewal” ?

@scrambler I setup full width as you suggested plus body {padding: 0px;}
the result looks fine so far, but the footer is not ready yet.
All has to look like that at the end, and behave responsive.
The actual status I managed with a page using html.

as you see there is a third full width area in the middle, and if I understand right, that is not possible with Weaver II Pro ?

[scrambler]

You can extend the background of an area using the method described under /*Extending background left and right of an area to full browser width.*/  in the thread below

http://forum.weavertheme.com/discussion/6542/infos-and-examples-for-custom-css-rules-part9#Item_1

You will probably need to set #main and #content to overflow:visible, and to avoid the artefact on mobile, use the method explained in note3

 

[Author]

Posts