Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 16, 2018 at 1:57 am #957255
    Studio13SprayTanning

    Hi enfold staff,
    I had an issue that was previously solved in another thread, but I would like to re-open the thread because the issue has returned after the most recent enfold update:

    Previous Thread: https://kriesi.at/support/topic/removing-space-between-boxes-on-mobile-view/

    Issue:
    Is there a way to remove the space between the boxes on the mobile view of the following page so that each horizontal dark row stacks without spaces in the mobile version (see below)?

    Page: https://nightlight614.com/2016-schedule

    Desktop: https://nightlight614.com/wp-content/uploads/2018/05/sched-desktop.png
    Mobile: https://nightlight614.com/wp-content/uploads/2018/05/schedmobile.png

    (I want to remove the spaces seen in the mobile version)

    Previous solution:
    @media only screen and (max-width: 767px) {
    #top.page-id-899 .flex_column.el_before_av_two_fifth {margin-bottom: 0px !important;}
    }

    May 16, 2018 at 3:07 am #957273
    Mike

    Hey Studio13SprayTanning,
    I took a look at your site on Android mobile and with Chrome dav tools, and couldn’t find the error.
    Please see screenshot in Private Content area.
    Have you tried clearing the device cache? Which device are you seeing this error on?

    Best regards,
    Mike

    May 16, 2018 at 3:32 pm #957539
    Studio13SprayTanning

    Mike – I apologize, I should’ve clarified. I am not seeing this same result on the page: https://nightlight614.com/dev

    Does the CSS that I have used apply site-wide, across all pages?

    May 17, 2018 at 3:53 am #957873
    Mike

    Hi,
    I’m sorry, when I wrote the code it was for only one page, thus the “.page-id-899” in the code.
    At the time I thought it for only one page, and typically code like is targeting the whole site can have unexpected results later.

    To correct please add a custom css via Enfold Theme Options > Layout Builder > Show element options for developers, to the first two columns, on all of the pages.
    Please use the custom class “movie-boxes”
    then use this css:

    @media only screen and (max-width: 767px) {
.movie-boxes {margin-bottom: 0px !important;}
}

    If this is unclear, please include the url to a new page with admin login and I will demonstrate how to achieve this for unlimited pages.

    Best regards,
    Mike

    May 18, 2018 at 4:19 pm #958654
    Studio13SprayTanning

    Hi Mike – thanks so much for your reply. I made the above additions, and when I access the page (/schedule) from my desktop and use different window widths, the boxes resize perfectly with no gaps. For some reason, on my mobile device, the gaps are still persisting (see photo).

    Any idea as to why this is occurring only on my mobile device?

    May 19, 2018 at 6:23 pm #959123
    Mike

    Hi,
    Sorry I’m not seeing the error on my Android device using Chrome, what browser are you using on your device?
    Try clearing your mobile cache and history.

    Best regards,
    Mike

    May 22, 2018 at 1:37 am #960081
    Studio13SprayTanning

    Mike – I have cleared my mobile cache and history. I am also seeing that the page is working correctly on an android device, but does not seem to be displaying the spaces correctly on Safari on multiple iPhone devices (iphone 7 and iphone 8).

    May 22, 2018 at 12:42 pm #960295
    Mike

    Hi,
    I have asked the team to take a look with Safari & iPhone, as I don’t have a Mac.

    Best regards,
    Mike

    May 22, 2018 at 5:14 pm #960423
    Yigit

    Hey,

    Third column is missing custom CSS class “movie-boxes”. Please make sure to add “movie-boxes” class to all columns you need without bottom margin on mobile.

    Best regards,
    Yigit

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