Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 3, 2019 at 2:53 pm #1106719
    transformmedia

    Hey,

    I have a problem with the progress bar I am using at this page:

    marcogiannecchini.de

    At the desktop view everything is fine, but when I look on mobile it looks like this

    https://ibb.co/W2YJwj2

    I tried to make the margins bigger with this code and specific class for the 2nd mobile version of the progress bar

    .avia-progress-bar-mobile {
    margin-bottom: 20px!important;
    }

    It is more readable then but it doesn’t look good at all.

    How can I make it look nice at mobile. The problem obviously is because in mobile in 2 bars the text is too long for a single line. So there are 2 bars that are in 2 lines. How can I make sure that there is the same margin between the bars even though there are bars with one line and bars with two lines?

    How would you solve that so that it looks good?

    Best regards,
    Tobi

    Short Update: I changed the font size in mobile to very small so that there are only bars with one line, so that it is readable. It’s not elegant, so I hope you have a good suggestion what to do :-)

    June 4, 2019 at 12:39 pm #1107062
    Ismael

    Hey transformmedia,

    Thank you for using Enfold.

    Have you tried setting the columns to break on tablet view or when the screen width is equal to or less than 989px? That should create more space for the progress bar. Edit the first column column in the row where the progress bar is located, go to the Screen Options and set the “Fullwidth Break Point” settings to the second option.

    Best regards,
    Ismael

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