Tagged: ,

Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #422302

    Hi

    I have chosen a stretched width layout (instead of boxed) and would like to use the layout builder. On one of my content page templates I would like to have a 2/3 + 1/3 layout. Within the 2/3 column I would like ANOTHER 1/3 + 2/3 layout. I have searched the forum and realise that nested columns are not supported.

    A grid row may suit my needs but the grid stretches the full width of the screen. I need to contain the content within the 1024px I have specified as the Maximum Container Width theme settings. I used the following code in the Quick CSS:

    .av-layout-grid-container {
    margin: 20px auto;
    width: 970px;
    }

    This achieved a layout very close to what I want except that it no longer behaves responsively.

    I have 28 pages to build which will follow this same template. Do you have a solution for me that would behave responsibly?

    Thanks

    #422402

    I have same problems. When I put layout elements 2/3 + 1/3 for example in color section, it behaves ok, not full width, but maximum container size for website.

    However, for some pages i need additional columns, so I use grid row, but now that content area in grid row is streched full browser width.

    Any fix for this? Thanks.

    #422462

    Hey!

    I cannot see Grid Row element on your page. Can you please give your Grid element a unique ID and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    #your-unique-id {
      max-width: 1310px;
      padding: 0 50px;
      margin: 0 50px;
    }


    @visionhd
    Please see above. If that does not help, post the link to your website

    Cheers!
    Yigit

    #424367

    Hi Yigit

    Thanks for your response. I made the following modifications to the code snippet you supplied. This seems to look correct and it behaves responsively now. Cheers.

    #your-unique-id {
      max-width: 984px;
      margin: 20px auto;
    }
    #424482

    Hello, I will prepare the page today and post it here. I tried your code and it makes grid row the desired size, but it is aligned to the left, instead in the middle of the page, like the rest of the content.

    Also, if we fix this together, why does this section pushes sidebar to be invisible? It seems only logical to me that this grid row element works fine with sidebar, too?

    • This reply was modified 8 years, 11 months ago by VisionHD.
    #424743

    Hey!


    @lldesign
    Great! Glad we could help :)

    @visionhd
    Grid row element is a fullwidth element and it would push sidebar below it, just like color section and other fullwidth elements.
    Please prepare your page and post it here so we can look into it :)

    Best regards,
    Yigit

    #449765

    Same question here and the snippet posted above works fine, but now the remaining space gets the Logo Area background color, not Main Content. How should I correct that? Thanks!

    #450379

    Any ideas?

    #450443

    Hi @mmagnani!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Cheers!
    Rikard

    #450781
    This reply has been marked as private.
    #450991

    Hey!

    Thanks for the link, I’m not sure what section you are having problems with though? Could you provide us with a screenshot highlighting how you would like the page to look?

    Regards,
    Rikard

    #451277

    Those boxes in main content are grid rows with limited width with snippet suggested above. Please note that the excedding space gets the Logo Area background color (now yellow) and I need it to be the main content background (currently white).

    #451536

    Hey!

    I’m not sure why it’s displaying that background colour, did you check your settings in Enfold–>General Styling? If you can’t set the colour there either, please provide us with a temporary admin login so we can have a closer look. You can post the details here as a private reply.

    Cheers!
    Rikard

    #462285

    I used the following code to fix the same issue I was having and it worked great:

    #your-unique-id {
    max-width: 1310px;
    margin: 20px auto;
    }

    Now I am having the same issue as the other person, the background on the sides is the same as my logo area. Everything is correct in the Enfold General Styling area. I even tried to change the Section Colors of the grid element to see what would happen and it did not change the background, just the content settings.

    Any ideas of what is causing this?

    Thanks.

    #462575

    Hi!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #462723

    @Micheal0424

    My problem was solved with the new customizable columns introduced in version 3.2

    Before that, the Grid Row background color could be adjusted with CSS

    #top #main {
      background-color: #ffffff;
    }

    Good luck!

    #462726

    Hey!


    @mmagnani
    Thanks for your input! :)

    Best regards,
    Yigit

    #462768

    Hello,

    I am having the same issues as the folks in this thread. I used the code snippet suggested which fixed the width, but now my content is also aligned left instead of center.

    http://www.souljuicin.com/juices (I only applied the ID to the top row so you could see the old problem as well)

    How can I fix this?

    Thanks!
    Mike

    • This reply was modified 8 years, 9 months ago by mburke79.
    #463300

    Hey!

    use this code to make your content center:

    .flex_cell.no_margin.av_one_half.avia-builder-el-4.el_after_av_cell_one_half.avia-builder-el-last {
    text-align: center;
    }
    .flex_cell.no_margin.av_one_half.avia-builder-el-23.el_after_av_cell_one_half.avia-builder-el-last {
    text-align: center;
    }
    .flex_cell.no_margin.av_one_half.avia-builder-el-43.el_after_av_cell_one_half.avia-builder-el-last {
    text-align: center;
    }
    .flex_cell.no_margin.av_one_half.avia-builder-el-63.el_after_av_cell_one_half.avia-builder-el-last {
    text-align: center;
    }
    

    Cheers!
    Andy

    #463676

    @mburke79, I did it with the @lldesign code above
    https://kriesi.at/support/topic/grid-row-width-2/#post-424367

    I mean, instead of

    #gridrow {
      max-width: 1310px;
      padding: 0 50px;
      margin: 0 50px;
    }

    try

    #gridrow {
      max-width: 1310px;
      padding: 0 50px;
      margin: 50px auto;
    }
    #463956

    @mmagnani

    Thank you that worked! I removed the 50px from the margin because it put an ugly black bar between the header and the page, and it still looks great.

    Thanks!

    #464424

    Hey @mburke79!

    Great, glad you got it fixed :)

    Cheers!
    Rikard

    #568177

    Hi,

    I’m having a related problem here. When I clone the lower grid row on this page, it stretches to full width and the left-hand element (column 1) is hidden beneath the sidebar.

    I note also from the CSS that the main content finishes beneath this grid row and the copy starts beneath it.

    Please help

    thanks

    Simon

    #568427

    Hi Simon,

    I’m not sure I understand what the problem is on your site, could you post a screenshot highlighting it please? Next time please open a new thread since they tend to get very difficult to follow otherwise.

    Best regards,
    Rikard

    #574838

    Hi Rikard – it’s fine – I’ve solved the problem – and yes, next time I’ll open a new thread.

    #575570

    Hi,

    Great, glad you got it working :-)

    Regards,
    Rikard

    #660764

    Hey there I have set my grid to :

    #para-grid2 {
    background-attachment: fixed;
    background-position: left top !important;
    background-size: cover !important;
    background-image: url(“http://www.samanthadoyle.com/wp-content/uploads/2016/07/weight-lift-2.png”) !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    max-width: 1500px !important;
    }

    And it won’t adhere to the max of 1500px is there something I did wrong?

    #660765

    I made an error in my code nvm.

    #660985

    Hi,

    Great, glad you found the problem :-)

    Thanks,
    Rikard

Viewing 29 posts - 1 through 29 (of 29 total)
  • The topic ‘Grid Row Width’ is closed to new replies.