Okay
  Public Ticket #2329946
Responsiveness
Closed

Comments

  • thehappyroad started the conversation
    March 17, 2020 at 11:41am

    Dear Support-Team,

    there seems to be a problem with the responsiveness of my "team" section: The description of the team members inside the box is not shown fully on mobile devices and there's no possibility to scroll. I tried setting the font to smaller size in order to fit more text in the box, but that makes it too small and unreadable. 

    Can you give me an advice on how to solve this? 

    Thank you!

  • [deleted] replied
    March 17, 2020 at 2:44pm

    Hi,

    The Team element is not created to have a very long text on it. Anyway, Please just add this CSS code to your Custom CSS area:

    @media screen and (max-width: 768px) {
    .team-holder .member .hover-state.padding {
        padding: 15px;
    }
}

    and see if that makes things better.

    Thanks!

  • thehappyroad replied
    March 18, 2020 at 12:01pm

    Thanks you very much!

    Do I add this at the general style section or the responsive section?

  • [deleted] replied
    March 18, 2020 at 12:45pm

    Hi,

    In the General sectionsmile.png

    Thanks!

  • thehappyroad replied
    March 19, 2020 at 8:43am

    Unfortunately not. I guess I'll just have to shorten the text then.

    But thank you anyway!

  • [deleted] replied
    March 19, 2020 at 9:28am

    Hi,

    Please try to add !important rule.

    Can you please add the code below to your Custom CSS area:

    @media screen and (max-width: 768px) {
    .team-holder .member .hover-state.padding {
        padding: 15px !important;
    }
}

    Thanks!

  • thehappyroad replied
    March 19, 2020 at 12:40pm

    Nothing changes.. what should be happening? 


  • [deleted] replied
    March 20, 2020 at 10:59am

    Hi,

    I can see that the CSS code is working as it should.

    See video: https://d.pr/v/j1ZYOl

    Thanks!

  • thehappyroad replied
    March 21, 2020 at 8:46am

    Yes, but on my mobile phone it looks the same as before, see picture. Same on my partners mobile.

  • [deleted] replied
    March 22, 2020 at 1:38pm

    Hi,

    The padding is reduced with the code that I send to you (as you saw in the video). You can detect that if you remove the CSS code and then refresh your phone browser cache.

    Thanks for your understanding.