Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1013513

    Hi,

    I need to use the grid row for design reasons for a custom footer on a site. I have #222222 as bacground and this need to be full width, but then I need the 2 cells/columns within to be on line with the boxed layout for the rest of the site with 1310px center. I have tried with columns and more cells within to make the space on the sides, but then it doesn’t look nice because it’s not on line with the rest. Please help!

    Kindly regards, Mathilde

    #1013757

    Hey mofix,

    Could you please attach a mockup of what you’re trying to achieve?

    Can you show us what you’ve got so far?

    Please post the link to the page.

    Best regards,
    Victoria

    #1014221

    Hi Victoria,
    Here’s a image of what I mean: https://www.dropbox.com/s/cb0ukb464afihm6/ex_grid.jpg?dl=0
    It will be the “footer” for all of the pages. Look link in private content.
    Thanks,
    Mathilde

    #1014293

    Hi Mathilde,

    The grid does not have the container that can be limited like that. So you need to use some other elements. Like 1/1 and two 1/2 inside.

    Best regards,
    Victoria

    #1014311

    it is always better to see a page than a screenshot.
    if you got a grid-row – you can force it to be the same way as a normal container.
    I use this often when i want to have nested containers.

    give to the grid-row a custom class: grid-notfull
    do this to your functions.php of your child-theme:

    function grid_layout_notfull(){
    ?>
    <script>
    (function($){
        $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize"></div>');
        $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
        $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'grid_layout_notfull');

    you have to adjust this line to your settings:
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
    ( the padding depends on the inner padding of the grid cells (on default it is 30px – so to come to the 50px left right … )
    you see what it does: it wraps the grid-container with a div that has the attributes of a color-section.
    it has on that the background-color on default from main_color – you can overwrite that with css

    #1014412

    Fantastic!!!!! Thanks a lot!!! That worked very well!! You saved my day!!
    Cheers, Mathilde :-)

    #1014428

    Hi Mathilde,

    Glad Guenni007 could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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

You must be logged in to reply to this topic.