Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 7, 2018 at 5:23 pm #909313
    stimmungshoch

    Hello,
    I use the grid row and have a display problem.
    My Layou should be very simple. Normally 2-columns a Qudatrat right with picture and left with color area + text and that completely turned over.
    It would be nice if the layout is 2 columns and the cells are Qudratic. It’s okay if both squares are on each other on mobile devices. How can it be best realized? I’ve found two ways to do it, but it’s not perfect yet.
    You can see the test-page here:

    Startseite 01

    I hope you understand, what i wish :-)

    Thanks so much!

    February 8, 2018 at 3:37 am #909544
    Ismael

    Hey stefan,

    Thank you for using Enfold.

    What do you mean by “Qudatrat”? Please provide a screenshot of the layout that you’re after so that we can understand it better.

    Best regards,
    Ismael

    February 8, 2018 at 10:53 am #909676
    stimmungshoch

    Hi Ismael, thanks for answer
    I have created a pdf. It explains my problem better. The correct term was “square”. I created the layout in 2 different ways in enfold. but I’m not really happy with both variants.
    Version 2 is really good, but why the picture disappears quite in the presentation on mobile devices, unfortunately, I do not understand here.
    Here i define under “edit cell” Mobile display always display
    I hope now it is understandable?
    http://wp10969801.server-he.de/responsiv_behavior.pdf

    Thanks and best regards Stefan

    • This reply was modified 6 years, 9 months ago by stimmungshoch.
    February 9, 2018 at 10:59 am #910190
    Ismael

    Hi,

    You should add the image as the cell’s background instead of using the image element, just like what you did on the second grid row. However, you have to define the minimum height of the cell so that it’s still visible on mobile view. First, turn on the custom css class field (http://bit.ly/2C7cJbg) then add a custom css attribute (ex. “house_cell”) to the cell with the image. In the General Styling > Quick CSS field, use this css code.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .house_cell {
    min-height: 500px;
  }
}

    Let us know if you need assistance.

    Best
    regards,
    Ismael

    February 14, 2018 at 2:54 pm #912290
    stimmungshoch

    Hi Ismael,
    looks good, i try to understand :-)
    I work with a child-theme and i hope all change i do will keep, when the next Enfold-Update are coming.
    Thanks you so much!

    February 15, 2018 at 4:56 am #912605
    Rikard

    Hi,

    Yes, your changes should survive updates. But to be sure I would recommend that you backup your site before updates, just in case something should go wrong.

    Best regards,
    Rikard

    February 15, 2018 at 1:47 pm #912751
    stimmungshoch

    Hi , sure i will do backup before, Thank you!

    February 16, 2018 at 5:12 am #913095
    Ismael

    Hi,

    Alright. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘2 Columms Responsiv-View’ is closed to new replies.