- This topic has 24 replies, 2 voices, and was last updated 10 years ago by
.
-
Posts
-
John,
Thanks again for getting in touch. This issue you’re experiencing is because of a style override you performed on the #main element, which is forcing it to a width of 710px. If you add the following style rule below that one, then it should fix the issue:
.tribe-mobile #main {
width:100%;
}
Give that a shot and let me know if it does the trick. Thanks! 🙂
-Casey-
John,
Yes, you’ll definitely want to make sure you’re overriding the latest styles. Just let me know if you need further guidance here. Thanks! 🙂-Casey-
Casey, I looked over the tutorials and I find them a bit lacking. There are so many stylesheets now, I don’t know where to start. Which one do I start with? Also, does this css code still work and would it be influencing the display on an android phone:
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
body { min-width: 150px; }
.tribe-events-thismonth, .tribe-events-othermonth { min-width: 50px; max-width:60px; }
#tribe-events-calendar-header { padding-top: 3em; }
.tribe-events-calendar-buttons { top:0; left:0; }
.tribe-events-calendar-widget td a.tribe-events-mini-has-event { cursor: pointer; }
}John,
When I plugged in the styling rule that I showed you up above, I was able to resolve the issue. Were you adding the rule to the end of your tribe-events stylesheet, or your theme stylesheet?I have that code in both spots now and with no other code in the tribe-events.css file. This is the result:
http://bestofnj.com/wp-content/uploads/2014/05/screen-1aa.jpg
http://bestofnj.com/wp-content/uploads/2014/05/screen-1aa2.jpgJohn
That page is @:
http://bestofnj.com/events/monthCasey, until I can get the Calendar display issue sorted out, I have reverted the changes I made back to the former state. Your style rule is simply not helping this issue on my computer or my phone and you are gone for the weekend.
We will try again next week.
John,
Can you try adding the !important declaration to the rules I sent? Like this:
.tribe-mobile #main {
width:100% !important;
}
Give that a try and let me know if it does the trick. Thanks! 🙂
-Casey-
Casey,
I tried that and it did NOT work. I also tested the pages on a Kindle Fire tablet and there is some quirk in the navigation bar that makes it never go away. I mention this in this context because it seems that the mobile version of the page is showing a wider space on the left gutter or border that might be allowing for a space for the mobile nav bar. Also on the mobile version the nav bar does not fit the space that is meant to contain it.
John,
I’m seeing some javascript errors on your site (screenshot) that is causing the .tribe-mobile class not to get added to the <body> tag, which is why the styles I’ve shared above aren’t working for you.Can you try deactivating all other plugins to see if that resolves the errors? If so, then try reactivating them one-by-one to determine if another plugin is the culprit. Give that a try and let me know what you discover.
Thanks! 🙂
-Casey-
Casey,
I have deactivated all the plugins and it is still not working. Is there some way to see where that jquery.ba-resize.min.js is coming from?
Are you seeing those same errors on this staging site? http://bestofnj.staging.wpengine.com/events/month
- The topic ‘Calendar Only Shows 6 Days on Mobile Version, Table Cut Off’ is closed to new replies.