Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 16, 2016 at 1:28 pm #649190
    Xperten

    Hi,

    We are trying to build a similar site (at least the top part) to: udemy.com

    We have now done the following:

    1) Made a big grid row 1/1 (full width)
    2) Inside the grid row we have inserted a row that also has a text block and a shortcode block
    3) Made the CSS that you can see in the private content, to align everything center of the page (thus allowing the grid row to have a background color, so it looks like there’s a box on top of a background color.

    Our problem is that we wish to have 2 or 3 boxes (we need to be able to have both) underneath what we have. However, when I insert e.g. 2 boxes below the 3 steps above, then the site does not align correctly (due to my inferior CSS).

    See pictures for explanation:

    Picture 1: What it looks like in our visual builder
    Picture 1 - what it looks like in our visual builder

    Picture 2: How it looks like in the browser
    Picture 2 - how it looks in the browser

    Picture 3: How we expected it to look like
    Picture 3 - how we would expect it to look like (+ example)

    So – I think my CSS code which I used to center the top red box, affects the rows and boxes we put in below. So, how can I make it so, that when we add (e.g.) 2 rows with elements inside it (all inside the grid row) like on picture 1 – it looks like it normally does, thus centering the two rows/elements besides each other.

    Really hope you can help us out here

    A test-site for you to check out is found right here

    • This topic was modified 8 years, 4 months ago by Xperten. Reason: css, grid row, alignment, margin, custom css,
    June 16, 2016 at 5:38 pm #649331
    begrafiks

    Hi @Xperten;
    This topic of the Enfold Documentation may help you.

    June 17, 2016 at 4:00 pm #649852
    Yigit

    Hi,

    Please try changing your code to following one

    @media only screen and (min-width: 1025px) {
#av-layout-grid-1>div>div>div {
    margin-left: 1%;
    width: 49% !important;
}}

    Best regards,
    Yigit

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