Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 11, 2018 at 9:15 am #996235
    EZWebdesign

    Hi,

    I have a problem with a (vertical) Timeline widget: on smaller screens (smartphone, i.e. Samsung, iPhone) it doesn’t look good anymore, I encounter several issues:
    – the text within the timeline isn’t readable at all anymore.
    – The ‘responsiveness’ isn’t optimal.
    – The text within a timeline element had a bullet list; when resizing the screen, the bullets not only disappear, the text also gets a huge left-margin or padding, so that it doesn’t fit/read anymore.

    See https://www.veroniquemeuffels.nl/historie. Can you please take a look?

    Thanks in advance, appreciate your help (and theme!) a lot!

    Regards,
    Roger

    August 12, 2018 at 6:10 am #996399
    Rikard

    Hey Roger,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.av-no-preview ul.avia-timeline-vertical li {
    padding: 0 0 0 50px;
}

.avia-timeline-boxshadow .av-milestone-contentbox {
    padding-left: 0;
}

.av-milestone-content ul {
    margin-left:0;
}
}

    Best regards,
    Rikard

    August 12, 2018 at 8:16 am #996413
    EZWebdesign

    Hi Rikard,

    Thanks for your answer. It looks better already, but still, the bullets are disappeared within the

      . They simply disappear when you resize the browser to a smaller size. Do you have an idea how to get them back?

      Best Regards,
      Roger

    August 12, 2018 at 8:17 am #996414
    EZWebdesign

    Also, maybe it’s a better idea to hide the thin vertical line under the timeline year-icon. How can I get rid of it?

    Regards,
    Roger

    August 13, 2018 at 4:25 am #996522
    Rikard

    Hi Roger,

    Thanks for the feedback. It does look a bit cramped on smaller screens, so if you want to remove the timeline then you can try this as well:

    @media only screen and (max-width: 767px) {
.av-milestone-icon-wrap {
  display:none;
}
.av-no-preview ul.avia-timeline-vertical li {
  padding: 10px !important;
}
}

    If you want to use this instead then please remove this part from the previous code I sent:

    .av-no-preview ul.avia-timeline-vertical li {
    padding: 0 0 0 50px;
}

    Best regards,
    Rikard

    August 13, 2018 at 9:22 am #996588
    EZWebdesign

    Hi Rikard,

    Thanks for your answer. Great, it does look just fine right now :-). If I may offer a suggestion: maybe the developers can look into it to have the vertical timeline react like this by default on smaller screens, for otherwise it isn’t very usable.

    Best regards,
    Roger

    August 13, 2018 at 5:29 pm #996779
    Victoria

    Hi Roger,

    Glad we could help :)

    Well, we are here to help and now other users can use the solution provided here if they need.

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

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