Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 14, 2017 at 6:36 pm #876725
    rhae

    Hi. I’m using the grid row element on the home page of my site (see the private content) and am having some problems with it.
    The site uses a stretched layout. The background color for the header and the footer is green, and the content background is white. Since the grid row is full width, and I want it to be in line with the rest of the content, I’ve used the following custom code to create a margin left and right:

    .av-layout-grid-container {
    max-width: 1310px;
    margin: 0 auto;
    background-color: #ffffff;
}

    1) Left and right of the grid row the color becomes green, like the header and the footer. How can I make that white like it’s supposed to be?
    2) I want the content of the grid row to align perfectly left and right with the rest of the content. Can you help me get the settings right? With the settings I’m using now the grid row is still a bit larger, and I can adjust that, of course. But isn’t this supposed to be the exact side width?
    I’m just not sure if this code scales right on all devices. Maybe there’s some code which is safe for all viewing sizes?

    I hope you can help me. Thanks!

    November 16, 2017 at 2:32 pm #877538
    rhae

    Hi,

    Any news on my three support questions?
    We need to go live at the end of the day … Thnx!

    November 17, 2017 at 3:28 am #877885
    John Torvik

    Hi,

    To fix your problem, you must need to replace your code by this:

      .av-layout-grid-container {
     margin: 0;
     padding: 0 3%;
     max-width: 100%;
   }

    With this code, your page will be align with the another sections and the background will be white.

    Best regards,
    John Torvik

    November 19, 2017 at 6:37 pm #878812
    rhae

    Hi John, thanks for your answer.
    I added the code to the side, and it does help to get rid of the green background. :-)
    The alignment is not right yet. I’ve adjusted the padding amount a bit, but depending on the width of the browser screen the alignment changes.
    Is there a way to make it always fit inside the margins of the rest of the content?

    November 19, 2017 at 7:26 pm #878821
    Mike

    Hi,
    I have looked at you homepage but I don’t see where the grid row is not aligned and a green background shows, perhaps I’m looking at the wrong page, can you include a screenshot of the issue.

    Best regards,
    Mike

    November 19, 2017 at 7:36 pm #878823
    rhae

    screenshot

    Hi Mike, the green background was fixed already.
    The grid row is on two pages, I’ve added a screenshot of the first page.
    Depending on the size of the browser window the grid row either aligns or doesn’t.

    • This reply was modified 7 years ago by rhae.
    November 19, 2017 at 9:00 pm #878844
    Mike

    Hi,
    The issue here is that the grid row is set to 100% width, so at larger screens it will stretch the width while the other elements are set to a max-width of 1210px.
    The best option would be to change the padding depending on screen size, it looks like it fine up to 1440px, is that true for you?
    What screen sizes do you want to cover? Are you considering the edge of the image the edge to line up? Ideally setting the max-width would be easiest, but that would give you the green background.

    Best regards,
    Mike

    November 27, 2017 at 7:23 pm #882334
    rhae

    Hi Mike,

    Since the browser window size (on desktop) will be different for every user, I can’t adjust the padding based on the screen size.
    Using max-width is not possible in any way without the green background? Why is it a green background? Can’t I make it white in any way? That would solve it.

    November 28, 2017 at 11:27 am #882583
    Victoria

    Hi rhae,

    BAckground is green because you set it in theme options to be the main color.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-layout-grid-container {
    margin: 0 auto;
    padding: 0;
    max-width: 1210px;
}
html, #main {
    background-color: #fff;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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