Best practice for a split screen view?

[G9Stuart4]

Hi Everyone,

I've been working on creating a theme for myself and so far have the front page sorted but I'm looking for one of the internal pages to be a split screen - i.e. one half is dedicated to Sole Oc and the other half is dedicated to Shared Oc and I would like the backgrounds of both to span 100% of their 50%, meaning from edge to edge.

I've tried to do this myself with widgets (but for some reason the wrapper disappears when I did this method) and I've also tried to set a CSS background to 50% one colour 50% another, which worked perfectly until the browser was resized.

Has anyone done anything like this before and can offer me some advice on the best way to achieve my desired look?

Thank you

[Brad Dalton]

Are you needing help with the background images only?

---

Tutorials for StudioPress Themes & WooCommerce.

[G9Stuart4]

To be honest with you, I don't really know - I have tried that method, but I don't know if there are any better ones than the two I have previously tried - would you recommend this method?

[Brad Dalton]

I am working on something at the moment which uses a background image for about 70% and background color for the other 30% but having the same problem when the screen changes size.

---

Tutorials for StudioPress Themes & WooCommerce.

[G9Stuart4]

Ah, I see - so you have opted for the same sort of thing as what I attempted with the background images? Could you let me know how you fathom the problem if you do, and I shall update here if I fathom out a way as well!

[Tom]

@g9stuart4 Can you clarify? You want:

two columns within the post/page;
each 50% width;
each with a defined widget area;
each with a background image or color;
responsive;

kinda like this? (or have I massively misinterpreted?)

---

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

[G9Stuart4]

Hey Tom,

Thanks for your example - I'm wanting them to be full width - background edge to edge, is this possible how you've done it? As when I tried, the text seemed to have no wrapper anymore :/ So not only was the background edge to edge but the text too?

EDIT: http://laluica.com/amir-vs-floyd/ is a good example, the two boxer profiles, edge to edge but still in a wrapper - something like this 🙂

[G9Stuart4]

Can I also ask, is it best practice to use widget areas? Or is there a way it can be done without widgets? The homepage has left me with quite a few widget areas and if I can help it, I'd like to cut back on using them if I don't have to 🙂

But this is my first time using Genesis and creating my own theme and I'm new to PHP, kind of learning on the way though!

[Brad Dalton]

Here's what you can do using split background images for half each

---

Tutorials for StudioPress Themes & WooCommerce.

[G9Stuart4]

I think I've just managed to fathom out a way to do it with widgets, and keep my wrapper around it all!

If you're interested - this is how I've done it;

// Calling Header
get_header();

echo '<div class="background-50-50">';
echo '<div class="wrap">';
// Display Special Events One Half Widget Left
genesis_widget_area( 'special-events-left', array(
'before' => '<div class="special-events-left widget-area">',
'after' => '</div>',
));

// Display Special Events One Half Widget Right
genesis_widget_area( 'special-events-right', array(
'before' => '<div class="special-events-right widget-area">',
'after' => '</div>',
));
echo '</div>';
echo '</div>';

// Calling WordPress Loop
echo '<div class="wrap">';
genesis_do_loop();
echo '</div>';

// Calling Footer
get_footer();

What do you think, is this semantic? I'll have a look over your link now, thanks for that!

EDIT: http://stuartgreen.me.uk/pontins-events/special-events/ here is the link, if you'd like to check it out

[Author]

Posts