- This topic has 22 replies, 3 voices, and was last updated 12 years, 11 months ago by
.
-
Posts
-
If I have no events on the calendar the calendar displays correctly however if I have events on the calendar (on my site that would be starting in June ) issues occur. For example a 320×480 display the calendar doesn’t respond correctly to that screen size. I’m wondering if this is a ECP issue or something with my theme?
It’s difficult to say, it could also depend on the user agent (ie, the particular browser software running on the test device). Does the same problem occur if you resize your desktop browser to those dimensions?
In the best case a width of 320px only leaves around 45px per column and less than that is likely to be usable space when you factor in ‘losses’ due to padding, margins and borders needed for legibility.
It might be better in those circumstances to break away from a grid of 7 columns altogether – there’s not really a ‘correct’ solution here, it depends on a huge number of variables and what will work well for you may be unacceptable for someone else.
Hi Barry,
I am using Chrome 26.0.1410.65 and also my iphone 5 to test the page. When you say “break away from the 7 columns” do you mean just leave it as is ?If I were to use a Media Query would it be possible to say when you reach the browser size of X, switch to display the event list.
Using a media query to change the layout would probably be the first thing I’d look at here. A more ‘advanced’ method would be to detect that the request is coming in from a handheld device and redirect to the upcoming list.
Neither is fullproof and they are not mutually exclusive, either, so you could do both and/or roll in some other techniques 🙂
christina, does this, https://gist.github.com/afragen/3762892 help?
Yes christina, it’s in my theme’s /events/events.css file. You need to make sure this file gets loaded. Check out The Events Calendar User CSS plugin. It makes this process simpler.
okay I have an events.css that I’ve been using to customize other things on my site and they’ve all loaded fine however, this the script you shared with me seems not to be loading. Would there be a reason why certain things load and others don’t? I’m assuming that is the plugin you linked me to is for..
It’s for loading your events.css file and loading the default events.css file in the plugin. That way you don’t have to copy any existing data to your override file.
Hi Andy,
Before I had the plugin installed I had the events folder setup and had copied all the core events.css into my events/events.css After installing your plugin I deleted all the core events.css and left only my override CSS. It seems to be loading the css you gave me however that code is causing other issues with my theme. Check out the screenshot from my iphone5 here http://wuq.wpengine.com/wp-content/uploads/2013/05/Screen-Shot-2013-05-20-at-5.22.25-PM.pngAlso my style sheet URL is:
wuq.wpengine.com/wp-content/themes/WishUponaQuilt/events/events.cssIf you look in the source head for the page you can see the load order of he stylesheets. If you comment out the responsive code yu should have the same result as before the plugin. It may be that some of your there’s css was overriding the default events.css and ou didn’t realize it. I’ll tr o take a look at it on a computer when I get home. It looks fine on my iPad.
Sorry I linked the wrong screenshot. Here is the correct one http://wuq.wpengine.com/wp-content/uploads/2013/05/photo.png
The screenshot points to homepage not calendar. The homepage seems to be at a different URL and uses a different theme than the calendar page. There is some css cleanup that needs to be done to make the calendar look better. We can work on that. It seems that there’s more thn one domain and theme being used.
- The topic ‘Event Calendar Responsive display styling issues’ is closed to new replies.