Mobile responsive css code for Tables and Search

  • Resolved zenz1

    (@zenz1)


    7 years, 4 months ago

    Hi and thanks again, as ever for this beautiful plugin.

    I am near able to be able to launch using Events Manager but have spotted that:

    1) the Tickets box overspills on mobile screens.

    2) the Search input boxes do not automatically resize causing similar overspill issues.

    For problem 1 I found this code:

    @media screen
    {
    th
    {display: none;}
    tr
    {display: flex; flex-direction: column;}
    td
    {display: flex; flex-direction: column;}

    }

    BUT – it does not work. I have no solution for problem 2. I have tried adjusting the input fields to auto.

    Can you please offer a solution or some css so that I can overcome this, please?

    Really thanks and the very best – as ever.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    I’m sorry to hear that you’re running into a couple styling issues. Please provide a link to the site/page in question so we can look into this further.

    Thread Starter zenz1

    (@zenz1)

    Gosh – how I would love to be able to do that. We are pre-launch and I am not allowed to publically put the web address out there yet.

    Very sorry and I have not had authorization yet to put the plugin through to upgrade – which is the plan but when I have proven the value.

    I can summerise the issue as everything else works as flawlessly as a dream machine does…

    1) In mobile only – when the tickets option is selected the columns do not flex or stack vertically and so instead pan to the right and therefore off the screen. It does scroll right as expected but this looks terrible.

    2) The search widget/Shortcode – [event_search_form]. The two input fields name and location do not auto adjust/scale and so extend over the widget area.

    I hope that makes sense. I understand well that you may need to see this and so can only suggest using any current one you have in mobile and seeing it for yourself by using the shortcode on a page and selecting tickets or making the widget area slightly smaller.

    If you cannot help – I am just greatful for a quick response.

    Hello,

    I understand your dilemma, and I apologize, but I would really need to see the page in question to give the most accurate response. If you are familiar with media queries, I would recommend working with them to make the proper css adjustments. Another tip is to use the browser inspector to get the exact classes you need to target. Please see the following for more on media queries:
    https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

    Thread Starter zenz1

    (@zenz1)

    Thanks – you are so very good to be this helpful.

    I will take a look and if you are saying that I should be able to make sense from there – then that is good enough for me.

    Very much appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile responsive css code for Tables and Search’ is closed to new replies.