• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Best practice for a split screen view?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Best practice for a split screen view?

This topic is: resolved

Tagged: css, html, php, Split Screen

  • This topic has 9 replies, 3 voices, and was last updated 8 years ago by G9Stuart4.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 27, 2015 at 3:58 am #166752
    G9Stuart4
    Member

    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

    September 27, 2015 at 4:28 am #166753
    Brad Dalton
    Participant

    Are you needing help with the background images only?


    Tutorials for StudioPress Themes & WooCommerce.

    September 27, 2015 at 4:56 am #166757
    G9Stuart4
    Member

    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?

    September 27, 2015 at 11:33 am #166775
    Brad Dalton
    Participant

    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.

    September 28, 2015 at 2:10 am #166819
    G9Stuart4
    Member

    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!

    September 28, 2015 at 1:53 pm #166864
    Tom
    Participant

    @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 ]

    September 29, 2015 at 5:51 am #166919
    G9Stuart4
    Member

    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 🙂

    September 29, 2015 at 6:38 am #166923
    G9Stuart4
    Member

    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!

    September 29, 2015 at 7:33 am #166927
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes & WooCommerce.

    September 29, 2015 at 7:39 am #166929
    G9Stuart4
    Member

    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
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble