Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 27, 2017 at 10:31 am #869499
    badoes

    Hello,

    I have done some custom CSS on some columns and did some repositioning on rows to position web elements the right way.
    I am working on a 1366×768 screen & checking the way it looks on a bigger screen 1920×1080.

    I encouter the following issue with the page: http://webfabric.nl/limonade/werkendam/ :
    – all was perfect configured using my laptop 1366×768 screen
    Screenshot here
    – but if I view the page using the bigger screen 1920×1080 the top top rows & cloud has been position much more lower.
    Screenshot here

    How to make sure all will be retained as shown when using my smaller screen?

    October 29, 2017 at 5:56 pm #870144
    Victoria

    Hey badoes,

    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

    
#av_section_2 .flex_column_table  {
      margin-top: 0 !important;
}

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

    October 30, 2017 at 4:15 pm #870544
    badoes

    Hi Victoria,

    Many thanks for your reply. This will work I think.

    Meanwhile I managed to accomplish my goal by replacing the content section with a row element.
    This works for me.

    However I still have a challenge here. No the rows behave responsive, however they now overlapping each other.
    I need to generate some space between those cells, but whatever I do, it is not working.

    Check: http://webfabric.nl/limonade/werkendam/

    Any idea.

    November 3, 2017 at 3:57 am #871917
    Ismael

    Hi,

    Please add this code in the Quick CSS field.

    @media only screen and (min-width: 989px) {
    #av-layout-grid-1 {
       table-layout: auto;
       display: table;
    }

    #av-layout-grid-1 .flex_cell {
        width: 24.3% !important;
        display: inline-block;
    }
}

    Please apply a unique Section ID to the grid row element and replace the generic selector (#av-layout-grid-1). It may require a few css adjustments.

    Best regards,
    Ismael

    November 8, 2017 at 3:58 pm #874226
    badoes

    Thanks!

    November 9, 2017 at 7:17 am #874483
    Ismael

    Hi,

    No problem. Let us know if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Columns position / margins (responsive)not retained on other bigger screen sizes’ is closed to new replies.