Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 3, 2022 at 10:14 am #1350278
    oestersund

    Dear team,
    on my page below I use on “home” in the middle part (“Business” , “Architektur” , …) 1/2 column ea. – equal height, no distance, row margins =0. I want the columns to cascade downwards w/o any horizontal space, like the fields of a chess game and similar to a portfolio grid. But I did not find a way to solve this. An idea how to realize this would be great. Thx & best regards, Tilman

    May 4, 2022 at 7:06 am #1350403
    Ismael

    Hey Tilman,

    Thank you for the inquiry.

    Have you tried applying the image as background to the flex column element instead of placing it in a text block?

    You can also apply a negative top margin to the rows to pull them upwards.

    #top .flex_column_table.av-equal-height-column-flextable.av-kal2af-9852955e6ed6f8236017db0517695e0b, #top .flex_column_table.av-equal-height-column-flextable.av-aq85pj-cc0d57d70973fb97fd3d575c63048b9e, #top .flex_column_table.av-equal-height-column-flextable.av-6kzfhz-8105bb8566dbb446162dde51238fefb1, #top .flex_column_table.av-equal-height-column-flextable.av-6f1ivr-05e6ff33094764f8f2d74f0d8921c9ef {
    margin-top: -15px;
}

    Best regards,
    Ismael

    May 4, 2022 at 2:33 pm #1350489
    oestersund

    Hey Ismael,
    yes, I´ve tried to put the pics as column background. The space disappers, but no pic setting (Cover, stretch, no repeat, …) results in a proper display. E.g. either the pic is complete, but way too small, or it is full-width, but only a part of the pic ist shown. Plus, pic on the left or right side, result in different results, too.

    But playing around with row column margins between -20 / -15 finally made it :-)

    Cheers, Tilman

    May 4, 2022 at 2:59 pm #1350496
    Rikard

    Hi,

    Great, I’m glad that you found a solution. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    May 4, 2022 at 6:35 pm #1350518
    oestersund

    Hi Rikard,
    yes, there is an issue: This does not work on smartphone / ios, partly text & pic are mixed up/overlayed. I did not see an option to trigger a resolution-based different handling. Any idea? Or do I have to build this section a second time:
    a) the present one for LT/pad b) a changed layout e.g. 1/1 colums only für phones?

    Thx again, Tilman

    May 5, 2022 at 8:39 am #1350555
    Ismael

    Hi,

    Thank you for the update.

    You don’t need to recreate the section on mobile view, just use this css code to remove the top and bottom margin of the rows on smaller screens.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  #top .flex_column_table.av-equal-height-column-flextable.av-kal2af-9852955e6ed6f8236017db0517695e0b, #top .flex_column_table.av-equal-height-column-flextable.av-aq85pj-cc0d57d70973fb97fd3d575c63048b9e, #top .flex_column_table.av-equal-height-column-flextable.av-6kzfhz-8105bb8566dbb446162dde51238fefb1, #top .flex_column_table.av-equal-height-column-flextable.av-6f1ivr-05e6ff33094764f8f2d74f0d8921c9ef {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

    Best regards,
    Ismael

    May 5, 2022 at 8:49 am #1350559
    oestersund

    Hi Ismael,
    thanks – i.e. I just add this CSS code in the overall settings, right?

    Best regards, Tilman

    May 5, 2022 at 9:24 am #1350575
    Ismael

    Hi,

    Yes, you can add the css in the Enfold > General Styling > Quick CSS field or include it in the style.css file within the child theme directory. You may also need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. And please purge the cache or remove the browser history before testing the page.

    Best regards,
    Ismael

    May 5, 2022 at 10:19 am #1350591
    oestersund

    thx – I did this, but it is still overlapping on mobile

    Any idea what to do? pls find temp login attached

    • This reply was modified 2 years, 7 months ago by oestersund.
    May 6, 2022 at 7:32 am #1350746
    Ismael

    Hi,

    Thank you for the login token.

    We disabled the WP Fastest Cache plugin temporarily and adjusted the code in the Quick CSS field a bit. We also moved the css media query at the very bottom of the field. 

    @media only screen and (max-width: 1024px) {

  /* Add your Mobile Styles here */
  #top .flex_column_table.av-equal-height-column-flextable.av-u5u78n-c836e3659f0f04d47a7b622aad8c8982, #top .flex_column_table.av-equal-height-column-flextable.av-6f1ivr-25460d7e21f710622c5afd65b03cb0a3, #top .flex_column_table.av-equal-height-column-flextable.av-6kzfhz-b170adae3eaae60661b403f9eaea26bb, #top .flex_column_table.av-equal-height-column-flextable.av-aq85pj-4e5e1a4480911c5ae992b53c39db1e5e, #top .flex_column_table.av-equal-height-column-flextable.av-kal2af-9f6b3946e13f262c3a4866e793e7b6c6, #top .flex_column_table.av-equal-height-column-flextable.av-kal2af-9852955e6ed6f8236017db0517695e0b, #top .flex_column_table.av-equal-height-column-flextable.av-aq85pj-cc0d57d70973fb97fd3d575c63048b9e, #top .flex_column_table.av-equal-height-column-flextable.av-6kzfhz-8105bb8566dbb446162dde51238fefb1, #top .flex_column_table.av-equal-height-column-flextable.av-6f1ivr-05e6ff33094764f8f2d74f0d8921c9ef {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

    Please make sure to remove the browser history before checking the page.

    Best regards,
    Ismael

    May 6, 2022 at 7:48 am #1350749
    oestersund

    Hi Ismael,
    fine, now it works :-)

    thx a lot & have a nice day Tilman

    May 7, 2022 at 2:03 pm #1350859
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Still space between columns, should be "0"’ is closed to new replies.