Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 9, 2018 at 2:25 am #910078
    trconnected

    Hi,
    how can I center one or several layout elements horizontally, if their total width is smaller than the page width?
    I need to centre a group of three equidistant images (all with individual links and text fields) with a total width of 75% of the page width (see link with the required layout). If I use three 1/3 layout elements they stick on the left side of the page. I also tried to center them by inserting them into a colour section. But there is no way to center a colour section either.
    Thank you for your help!

    February 9, 2018 at 5:17 am #910106
    Mike

    Hey trconnected,
    I tried to recreate what you are trying to do with the three 1/3 elements on my localhost, but it must not be right because they are centered.
    2018-02-08_221053
    Please include the url to the page in question or include a dropbox link to your Avia Layout Builder Debugger code as a plain text document, so we can help.

    Best regards,
    Mike

    February 9, 2018 at 2:57 pm #910274
    trconnected

    Hello Mike,

    thank you for your fast reply!
    Unfortunately, I made a stupid “typo” in my above explanation :-(
    What I meant and what I actually did is “I used three 1/4 layout elements…” and NOT “1/3”. So as stated the total widht of the elements is 75%. Generally I would like to center any combination of layout elements with a total width smaller than 100%. I attached the debugger code of my specific page as .txt-file. Hope there is an easy solution and sorry for the confusion!

    Best regards,
    Tim

    February 9, 2018 at 3:15 pm #910278
    Mike

    Hi,
    Thanks for sharing the code. Please put the three 1/4 columns in a color section, and then add this code in the General Styling > Quick CSS field:

    .post-entry-3143 .entry-content-wrapper {
    display: flex;
    justify-content: center;
}

    I’m going to assume that the “post-entry-3143” is the same number on your site as this was your code, but if not adjust the number to match your site. If this still doesn’t work then set up the color section and include the url to the page in question so we can adjust.

    Best regards,
    Mike

    February 10, 2018 at 1:24 am #910448
    trconnected

    Hi Mike!

    Thank you! I found the corresponding number for the post-entry-… and it works like a charm!
    In addition, by setting “justify-content:” to “flex-start” I can align the layout element(s) from the left side and
    by setting it to “flex-end” from the right side of the page :-)

    Thanks again and happy weekend!

    February 10, 2018 at 4:48 pm #910556
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

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