Tagged: ,

Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • April 2, 2015 at 7:26 am #422302
    lldesign

    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

    April 2, 2015 at 11:28 am #422402
    VisionHD

    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.

    April 2, 2015 at 1:51 pm #422462
    Yigit

    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

    April 7, 2015 at 12:56 am #424367
    lldesign

    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;
}
    April 7, 2015 at 7:57 am #424482
    VisionHD

    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 9 years, 7 months ago by VisionHD.
    April 7, 2015 at 3:33 pm #424743
    Yigit

    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

    May 26, 2015 at 12:43 am #449765
    mmagnani

    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!

    May 27, 2015 at 2:11 am #450379
    mmagnani

    Any ideas?

    May 27, 2015 at 7:06 am #450443
    Rikard

    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

    May 27, 2015 at 7:28 pm #450781
    mmagnani
    This reply has been marked as private.
    May 28, 2015 at 8:13 am #450991
    Rikard

    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

    May 28, 2015 at 4:59 pm #451277
    mmagnani

    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).

    May 29, 2015 at 6:31 am #451536
    Rikard

    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

    June 21, 2015 at 7:24 am #462285
    Micheal0424

    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.

    June 22, 2015 at 11:32 am #462575
    Rikard

    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

    June 22, 2015 at 1:20 pm #462723
    mmagnani

    @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!

    June 22, 2015 at 1:23 pm #462726
    Yigit

    Hey!


    @mmagnani     Thanks for your input! :)

    Best regards,
    Yigit

    June 22, 2015 at 1:52 pm #462768
    mburke79

    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 9 years, 5 months ago by mburke79.
    June 23, 2015 at 12:12 pm #463300
    Andy

    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

    June 23, 2015 at 10:36 pm #463676
    mmagnani

    @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;
}
    June 24, 2015 at 12:19 pm #463956
    mburke79

    @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!

    June 25, 2015 at 7:09 am #464424
    Rikard

    Hey @mburke79!

    Great, glad you got it fixed :)

    Cheers!
    Rikard

    January 19, 2016 at 10:20 pm #568177
    friendlier

    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

    January 20, 2016 at 8:23 am #568427
    Rikard

    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

    January 30, 2016 at 12:13 am #574838
    friendlier

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

    February 1, 2016 at 6:48 am #575570
    Rikard

    Hi,

    Great, glad you got it working :-)

    Regards,
    Rikard

    July 14, 2016 at 10:47 am #660764
    Briana

    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?

    July 14, 2016 at 10:52 am #660765
    Briana

    I made an error in my code nvm.

    July 14, 2016 at 7:20 pm #660985
    Rikard

    Hi,

    Great, glad you found the problem :-)

    Thanks,
    Rikard

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