Full width area within Page

Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  Terrance Grace 3 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3792

    jk allen
    Participant

    Hey Sean,

    Working on a couple of sites with Volatyl. It’s quickly becoming my go to framework these days (as I knew it would).

    I need help on something…

    I want to create a few full width background areas within a page. To be more sepecifc, I want these full width areas to have a grey background that stretches across the entire screen. An example would be like what you have on this page in the area that reads: “7 Responsive Layouts With Your Choice of HTML Structure”.

    Can I do this same thing on a normal page?

    So far, I’m using the following HTML:

    <div class="test-block full">
        <div class="main">
            <div class="class inner">
                TEST CONTENT HERE...
            </div>
        </div>
    </div>

    And for the .test-block I have I’ve added the following to the CSS file:

    .test-block {
      background: #dddddd;
    }

    The result I’m getting is that the background area is only filling the width of the page area instead of the full screen.

    The issue maybe that I can’t do this within a page, but need to utilize a hook for this. But I’m not sure so would like to get your input.

    Thanks!

    -JK

    #3795

    Roberto Porcar
    Participant

    I think Sean uses a custom page to achieve that.

    do you have a live website? are you trying to override the parent width?

    #3794

    sdavis2702
    Keymaster
    Post count: 72

    What’s up, JK?!

    Flamerz is correct. You should build full-width structures using the “Custom Layout” template when you create a new WordPress Page. Here’s documentation on how to use it… it’s no different than what you saw in Thesis 1. http://volatylthemes.com/custom-layout/

    An alternative to this if you still plan on using the WYSIWYG editor for the Page is to just use the vol_headliner and vol_footliner hooks to add content above and below the content area of your page.

    With that, you can just take to your functions.php file and use some type of conditional to target your Page and you’re good to go. Again, though, that’s if you also put the actual Page content to good use. By default, the Page title and content are going to show. You could display: none; them but that doesn’t remove the markup so… you know.

    #3793

    jk allen
    Participant

    Flamerz and Sean,

    Thank you for the answers. This is exactly what I needed to know.

    I’m already moving in that direction.

    Have a nice weekend!

    – Jk

    #4795

    Terrance Grace
    Participant
    Post count: 2

    I was experimenting with this as well and creating a custom page layout works great if the designer will be doing any updating of content… But what about allowing the client to still use the visual editor to update a browser wide banner(s) within a page.

    I did some googling and playing around and this very simple solution worked for me in both safari and firefox (not tested in ie):

    .fullbanner {
        left: calc(-50vw + 50%);
        position: relative;
        width: 100vw;
    }
    
    * { box-sizing: border-box; }
    

    Just drop that div class into a page and boom… works. But I just wanted to know if anyone had thoughts or cautions when using viewport css to achieve this?

    TG

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

You must be logged in to reply to this topic.