BP Group Calendar css issue

Hello, there is an issue, I think in css, how the Month View is displayed in a BP group. The event title and description is often getting outside of the framed boundary, depending on the display width. There are also some improper or exceeding lines in the Month View field. This problem is seen with almost all themes I tried (except 2015, 2016 and maybe some other Twenty… themes). See the screenshots with the GeneratePress theme.

  • Stefan
    • Design Lord, Child of Thor

    Dear Kasia,

    yes, it has helped – on wider screens all is displayed correctly inside the view field. However, on narrow screens like smartphones the event list including the title is still getting out of the view area (see the screenshot). Apparently, the event list just cannot fit beside the calendar (even if I set padding-left: 0), it should move under the calendar area on such narrow screens. Is it difficult to achieve?

    Thanks and Regards,


  • Stefan
    • Design Lord, Child of Thor

    Hi Ash,

    sure, it is theme specific. Depends on the font face used to display the calendar and event list, and, of course, on the phone screen pixel width. The length of the longest word also counts (although with some themes the words are just split anywhere). I have also managed to achieve almost the same like you (see Calendar-narrow-3.jpg). Now I am using the “i-excel” theme hosted by wordpress.org and my phone screen is 720 pixels wide (Sony Xperia Z3 Compact). Should I have the bigger Z3 with a display of 1080 pixels wide it would look even better. But now, with my 720 pixels, if I choose a different month where there is some event the list will not fit (see Calendar-narrow-4.jpg).

    So a proper responsive page design should provide that the text field “jumps” under the calendar area if it cannot fit beside.

    Well, I don’t know whether this has to be done in the plugin css or the theme css.



  • Ash
    • WordPress Hacker

    Hello Stefan

    Well, it has to be with plugin css as well as with theme css :slight_smile: Normally, plugin doesn’t include css for common elements so that it can inherit from theme. So the design varies from theme to theme.

    Would you please grant support access from your Dashboard > WPMU DEV > Support > Support Access so that I can check? Also mention which subsite I should check or BP is network activated.

    Grant WPMU DEV Support Access

    I will be happy to take a look :slight_smile:



  • Stefan
    • Design Lord, Child of Thor


    one more remark: please, notice how the calendar Month View behaves with the Twenty Fifteen theme: correct on wider screens but completely bad on my 720 px screen. And compare to a blog post with a picture inserted into text: on wider screen the text is besides the picture and the rest which does not fit continues under the picture. When the screen is so narrow that no text cat fit besides it completely moves underneath. This is correct responsive design behavior. See the enclosed screenshots.



Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.