Event Calendar too big in Windows Browsers and not fully responsive in Iphone

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author loushou

    (@loushou)

    9 years ago

    Hey @skpope ,

    It seems like what is going on is your theme uses a non-standard templating method, which actually overlays the header on top of the content area with absolute positioning, instead of stacking them statically like other themes. Not to worry though, this is easily solvable by adding a little custom css. If you have an area in your theme admin where you can add some custom css, try adding this little bit into that area, and refresh:

    .page-template-qsot-calendar-php #content { padding-top:90px; }

    If you have a child theme instead, add that line to your child theme stylesheet. That should solve the ‘hidden dropdowns’ problem.

    As for the responsiveness of the calendar, we actually use a javascript library called ‘fullcalendar’. I will do a little checking into how best handle the calendar on smaller screens, because as your screenshot demonstrates, it is not very appealing. Thanks for calling that to my attention, because it definitely needs addressing.

    Loushou

    Thread Starter skpope

    (@skpope)

    9 years ago

    That did the trick to allow me to change the month. Is there as way to make the calendar smaller on the page, so I can see the whole thing? Is that a template thing too?

    skpope

    Plugin Author loushou

    (@loushou)

    9 years ago

    Hey @skpope ,
    You can absolutely make the calendar template fit differently on your page. In order to do this though, you will need to copy the calendar template to your theme dir (or child theme if you have one). First you need to make a folder inside your theme dir called ‘templates’. So for instance:

    /wp-content/themes/zerif-pro-child/templates/

    Then you need to copy the calendar template from our plugin into that new dir. You should now have a file called something like this:

    /wp-content/themes/zerif-pro-child/templates/qsot-calendar.php

    Once you have this file you can make any changes you need to it, so that it fits your theme, or your desired layout. In your case, you will want to find the div that has the class ‘span12’ on it (line 11), and add a new class to, that your theme will use to constrain the width of the calendar, like your other pages. For you this class is ‘container’, which will constrain the width of this page, just like the widths of your other pages, to 1170px wide.

    Basically, you are changing this line:

    <div class="span12">

    To this:

    <div class="span12 container">

    That should get you setup.

    Just a reminder, it is best that this change occur in your theme, and preferably a child theme of your main theme. You do not want to edit the code in our core plugin, because when we do updates, your changes will get over written. To the same point, if you have a parent theme that is updated often, you will have the same problem if you add the file to the parent theme. Making a child theme ensures that your changes will persist even through a full site update, because, presumably your child theme is one you made, which contains all your local customizations in it, which there will not be an online update for, thus not blowing out your customizations.

    Hope this helps,
    Loushou

    P.S. – the release from yesterday got delayed, and will be happening today.

    Plugin Author loushou

    (@loushou)

    9 years ago

    Hey @skpope ,

    We completed the most recent update, 1.10.11, which includes several calendar improvments. These will provide a little more control over the display of the calendar, and will also be more future proof as themes start to incorporate templates for our plugin in them.

    First, you can now change many of the colors on the calendar. This should make it a bit easier to integrate the calendar visually into the theme. As time goes on, this will allow for even more control, but for now it is just the colors.

    We also improved the method of fitting the calendar into a theme, by adding some actions to control the ‘framing’ of the calendar template. This will allow themes to add some simple functions to their functions.php file to wrap the calendar. The old method of overriding the calendar template in your child theme is still available however, and could be preferable even, on highly customized themes. We also added a couple ‘classes’ to the appropriate containers to accommodate more themes and frameworks out the gate; however, this is not comprehensive by any means, and never will be. We will continue to allow the overriding of the template for infinity though, so that themes can control the framing if needed.

    We also made the calendar a bit more responsive. The calendar navigation now does not go off-screen. The fonts get successively smaller as the device gets smaller. As less room becomes available, various parts of the calendar item block are hidden, so that it does not look too cluttered on smaller screens. Much of the relevant information is still available on smaller screens, but it does fit a bit nicer now. The image does persist through all sizes, so events should still be recognizable based on that too.

    Thanks for bringing these up because it lead to a great update,
    Loushou

    Thread Starter skpope

    (@skpope)

    9 years ago

    It is looking much better. Nice work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Event Calendar too big in Windows Browsers and not fully responsive in Iphone’ is closed to new replies.