New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Full Width "Element" Block?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Back to forum
    Posted in: Neighborhood
  • March 16, 2016 at 2:37 am #255700
    jaredmaxsnider
    Member
    Post count: 23

    Hello.

    I am trying to find a way to place a full width content block into the page and I was wondering if there is an element that will accomplish this. Basically I just want have a div container that stretches 100% of the browser that I can build into. In essence I would like to mimic the way Revolution Slider works so that I can build responsive blocks of visual content into the website. Quite frankly, I can accomplish this with Revolution Slider but the way it works is so convoluted and frustrating I would just rather build the blocks myself. So I just need a container block that stretches across the browser at 100% width that I can build out using custom HTML/CSS. I am hoping this can be done within the structure of the theme”s “Elements” system. Thank you very much for your help.

    March 16, 2016 at 9:10 am #255722
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    In the page builder, add a Row element, found under Layout. Then in the row settings set to full width content: http://d.pr/i/14zGu/3p5P1BMJ

    – Kyle

    March 20, 2016 at 6:38 pm #256567
    jaredmaxsnider
    Member
    Post count: 23

    Thanks Kyle!

    This is heading in the right direction, now I am just having a problem with building the HTML inside this container. I want the HTML to be built on a full width scale as well but when I place the Raw HTML element inside the fullwidth Row element it is still constrained to the center of the page. You can see what I mean here: http://onewayscreenprinting.com/new/ .

    I want the red and yellow boxes to stretch full width. Eventually these boxes would be type and images that would lay right up against the boundaries of the container. I hope this pis possible, thank you in advance for your assistance.

    – Jared

    March 21, 2016 at 10:04 am #256644
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Add this to your custom css:

    .fw-row:not(.row-content-width) .container {
  width: 100%;
}

    – Kyle

    March 21, 2016 at 1:54 pm #256761
    jaredmaxsnider
    Member
    Post count: 23

    Awesome, thank you so much Kyle! I don’t want to push the boundaries of free support, but would there be a way to apply the full width to a specific element using my custom class selectors? Like to instead of site wide forcing all the containers to be 100% width to only make ones I select with custom class selectors 100% width and leave the rest as is? I just started investigating this and was looking into Parent Selectors or building my own css styles using the media query rules of the theme’s .container class, but if you know an easier way of the top of your head I would really appreciate it. Thanks again for all your help, hope I am not being annoying.

    March 21, 2016 at 1:57 pm #256762
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Yes you can add an extra class on the row and adjust the css to make only those rows full width

    – Kyle

    March 21, 2016 at 2:12 pm #256772
    jaredmaxsnider
    Member
    Post count: 23

    Thanks Kyle. I already have custom CSS applied to the row through the “Row Misc Options: Extra Class” section (named .container_base) but nothing happens when I add the “width: 100%” CSS to my stylesheet. I also cannot seem to find where .container_base is being applied when I view the site in Chrome Inspector. Can you tell me how I should be targeting this element? Thank you so much for your continued help, I really appreciate it.

    March 21, 2016 at 2:19 pm #256775
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Change the css I gave you to: 

    .fw-row:not(.row-content-width) .container_base .container {
  width: 100%;
}

    – Kyle

    March 21, 2016 at 2:23 pm #256779
    jaredmaxsnider
    Member
    Post count: 23

    Perfect. Really appreciate your willingness to help.

    March 21, 2016 at 2:24 pm #256780
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem 🙂

    April 24, 2017 at 9:32 pm #322157
    fdjukic
    Member
    Post count: 1

    Hi
    I am haveing similar problem when i put content in a row in first row all is good everithing is in a full width of the browser, but second row (below) all is still boxed, all settings are the same only different thing is that text block is on the left and image on the right (oposite of the first row)?

    Any solution?

    O sorry I wish for some content on the site to be full width of the browser!

    April 25, 2017 at 2:06 pm #322253
    David Martin – Support
    Moderator
    Post count: 20834

    Please start a new thread and privately post your WP login details.

  • Back to forum
    Posted in: Neighborhood
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register