Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 4, 2020 at 1:51 pm #1227918
    Tarakbc

    Hi!

    We are using a calendar with the Enfold theme. However when the calendar is viewed on a mobile device (holding the mobile vertically), the calendar does not display text on the individual days. It shows just black dots. Therefore I wanted to write a sentence above the calendar about holding the mobile horizontally so that our users can see the text on the calendar. However, when I open up the calendar as a post to edit it, I cannot see any way to write text which is visible above the calendar.

    (I am using ‘Simple calendar’)

    Grateful for any help!

    July 6, 2020 at 3:56 am #1228139
    Mike

    Hey Tarakbc,
    Sorry for the late reply and thanks for the link, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
#top.single-calendar article.calendar.type-calendar:before {
	content: "When the calendar is viewed on a mobile device please view horizontally";
  color: #777 !important;
  font-size: 1em;
}
}

    Feel free to adjust the statement in the code, and then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    July 11, 2020 at 4:53 pm #1229653
    Tarakbc

    That’s great! Thank so much for your help Mike.

    One more small thing. It would be good with one line of space between the text ‘when the calendar is viewed…’ and the top of the calendar. How to I add a ‘return’?

    July 11, 2020 at 7:44 pm #1229694
    Mike

    Hi,
    You can add a line break with \A and the css rule white-space: pre; like this:

    @media only screen and (max-width: 767px) { 
#top.single-calendar article.calendar.type-calendar:before {
	content: "When the calendar is viewed on a mobile device please view horizontally\A\A";
  color: #777 !important;
  font-size: 1em;
  white-space: pre;
}
}

    Note I added two \A because one didn’t seem to be enough of a break, as an alternative you could use margin or padding to add space below this.

    Best regards,
    Mike

    July 11, 2020 at 7:58 pm #1229700
    Tarakbc

    Thanks for your reply Mike. That worked.

    However, I just noticed another small problem. The sentence I want to add extends beyond the edge of the screen. For some reason the text does not wrap on to two lines.

    Any idea how to solve this?

    July 11, 2020 at 8:03 pm #1229703
    Mike

    Hi,
    Try using white-space: pre-wrap; instead of white-space: pre;

    Best regards,
    Mike

    July 11, 2020 at 8:08 pm #1229706
    Tarakbc

    That worked.

    Many thanks!

    July 11, 2020 at 10:58 pm #1229717
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Unable to add text above calender’ is closed to new replies.