Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • April 26, 2018 at 11:44 am #947212
    M_AVT

    Hallo!

    Ich habe bei meiner Team-Seite zwei Spalten angelegt, um Text (2/3) und Bild (1/3) nebeneinander darstellen zu können. Da das Bild bei einer Bildschirmbreite von 900px schon klein wird, möchte ich die beiden Spalten bei einer Bildschirmbreite kleiner als 900px untereinander anzeigen lassen. Und da ich das Bild rechts vom Text platziert habe, wird das Bild unter dem Text angezeigt, sobald die Spalten untereinander dargestellt werden. Hier hätte ich das Bild aber gerne über dem Text.

    Danke

    April 28, 2018 at 3:50 pm #948382
    Victoria

    Hey M_AVT,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    April 30, 2018 at 8:24 am #948843
    M_AVT

    Hey Victoria
    Thanks for your response. Here is the link to my website.

    May 2, 2018 at 10:45 am #949940
    Ismael

    Hi,

    Duplicate the section and re-order the columns. Place the image before the text. Use the Screen Options to toggle the visibility of the elements.

    Best regards,
    Ismael

    May 4, 2018 at 11:31 am #951549
    M_AVT

    Hi Ismael,

    thanks for your reply. I already tried it with duplicating the content. It works but i have a gap because the place of the gridrow is still shown, because there is a min-height of 100px. But how can i change this min-height bacause it is inline css.

    Thanks M_AVT

    May 7, 2018 at 12:17 pm #952643
    Ismael

    Hi,

    Thank you for the update. Did you set the visibility option of the elements inside the grid row? You should duplicate the grid row and set it’s visibility options instead.

    Best regards,
    Ismael

    May 15, 2018 at 10:47 am #956879
    M_AVT

    Hi Ismael!

    I duplicated the whole grid row and set the visibility at the grid row options. But now i have the gap between the menu and the content.

    Best regards

    May 16, 2018 at 8:37 pm #957677
    Basilis

    Hi,

    Please add

    .notfullsize { display: none }

    And that would fix the space :)

    Let us know if you need something else.

    Best regards,
    Basilis

    May 17, 2018 at 9:13 am #958035
    M_AVT

    Hi Basilis

    Thanks for your reply, but this code doesnt help. If i use it my whole content isnt visible anymore.

    Best regards

    May 21, 2018 at 5:32 am #959568
    Ismael

    Hi,

    Thanks for the update. They both have the same gap. Which “gap” are you referring to?

    // https://imgur.com/a/gdAk88p

    If you want to remove that gap, please use this css code.

    @media only screen and (max-width: 767px) {
#av-layout-grid-1 .flex_cell:nth-child(1) {
    display: none !important;
}
}

    Best regards,
    Ismael.

    May 22, 2018 at 9:22 am #960202
    M_AVT

    Hi Ismael

    Thanks for your reply. Sorry i havn`t explained it clearly.
    When the grid row is not duplicated the page looks like that on fullscreen https://imgur.com/OkuCeY3
    and on the Team page with the duplicated grid row also on fullscreen it looks like on this screenshot https://imgur.com/4i1j7vM (The gap is marked with the red circle)

    Thanks and best regards

    May 24, 2018 at 2:18 pm #961546
    Victoria

    Hi,

    Best regards,
    Victoria

    May 28, 2018 at 8:17 am #962961
    M_AVT

    Hi Victoria!

    Sorry, the php file was renamed. Now the link is correct.

    Best regards
    M_AVT

    • This reply was modified 6 years, 6 months ago by M_AVT.
    May 30, 2018 at 1:26 pm #964211
    Ismael

    Hi,

    Did you try the css code above? That will remove the gap above the grid row. You should apply a unique Section ID to the grid row element and use it instead of the generic selector “#av-layout-grid-1”.

    Best regards,
    Ismael

    June 6, 2018 at 11:00 am #967751
    M_AVT

    Hi Ismael!

    Thanks for your reply. Yes I tried the css code and i also used a unique ID for the grid row, but nothing changes.

    The grid-row element i find in the html in the following line. If i unselect “min-height: 100px” the gap disappears.

    • This reply was modified 6 years, 6 months ago by M_AVT.
    June 9, 2018 at 2:48 pm #970417
    Victoria

    Hi M_AVT,

    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

    
.page-id-24 .main_color.notfullsize {
  min-height: 2px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 25, 2018 at 9:09 am #977338
    M_AVT

    Hi Victoria!

    Thank you so much, this code works.

    Best regards

    June 25, 2018 at 2:14 pm #977480
    Victoria

    Hi M_AVT,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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