Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1295505

    We are using a Grid Row near the footer of the home page.

    It works perfectly for us only to the point when the browser window is big.

    It stretches out width wise… Is there a way to keep this set to a maximum width of 1600 pixels?

    #1295938

    Hey whdsolutions,

    Thank you for the inquiry.

    Would you like to limit the maximum width of the grid row container? You can use this css code for that.

    .responsive .container {
        max-width: 1400px;
    }
    

    And if you want to only apply it on a certain screen width, create a css media query.

    @media only screen and (min-width: 1600px) {
      /* Add your Desktop Styles here */
       .responsive .container {
           max-width: 1400px;
       }
    }
    

    Best regards,
    Ismael

    #1295956

    sorry Ismael – a grid-row with .container ? ;)
    The Grid-Row itself got that class: .container_wrap
    or do you see more info about the page – is it a grid-row he is talking about?

    i do not see his page – but even with that class adjustment he will have trouble if .main_color is set to something different than white.
    my solution for that is to wrap the grid-row in a container that has the attributes of a color-section.
    Just give the custom-class: grid-notfull to the grid-row element.
    The additional class – added by the script color1 is for custom color if you would like to deviate from the default setting.

    See example page – https://webers-testseite.de/grid-row-alb/

    • on top normal grid-row
    • in the middle : grid-row with that custom-class : grid-notfull
    • on the bottom : grid-row with only css setting ( set the .container_wrap to max-width )

    here is the little snippet for child-theme functions.php:

    function grid_layout_notfull(){
    ?>
    <script>
    (function($){
        $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></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 25px"});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'grid_layout_notfull');

    adjust the grid-notfull class to your settings ( your container generall setting on Enfold Options)
    The padding has to be adjust too

    #1295959

    Tried both and nothing seems to work :(

    #1295969

    so you got a different Enfold than me?
    You see on the example page that it works?
    have you a link for me to see what is the issue?

    #1296182

    Hi,

    @guenni007: You are right. When I inspected the page I did not notice that I was inspecting the footer container and thought it was a grid row because it looks like it, but it is a default footer.

    @whdsolutions: Would you mind providing a screenshot of the grid row? We cannot find it in the home page.

    Best regards,
    Ismael

    #1296268

    if these are only #footer flex_columns – try:

    @media only screen and (min-width: 768px) { 
      #footer .container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1600px;
      }
    
      #footer .container::after {
        display: none;
      }
    
      #footer .container .flex_column {
        width: unset;
        flex: 1 1 auto;  /*** the first "1" and the auto value has the possibility that column 2 can grow bigger than the others - else 30%  ***/
        margin: 0 0 20px;
      }
    
      #footer .container .flex_column:nth-of-type(2) {
        padding: 0 20px;
      }
    }

    adjust the wanted column-width with the flex setting
    and adjust the max-width of the container to your needs

    • This reply was modified 2 years, 12 months ago by Guenni007.
    #1296646

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.