Title: css inconsistency? Last modified: August 31, 2016 --- # css inconsistency? * [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/) * Hi, I noticed a few things regarding visualization and I’d like to have clarification. * I’m using the plugin to display my public calendar inside a bootstrap modal window. I’m currently using firefox from a pc so not on mobile. * 1) The first time I open the modal (full window) the calendar display like this * [img1](https://onedrive.live.com/redir?resid=F2D0CDC94E5774A6!2580&authkey=!APhYGu18fiDHEdY&v=3&ithint=photo%2cpng) * 2) If I resize to approx tablet size the calendar display like this * [img2 * 3) If I resize approx to phone size it displays like this * [img3 4) If I resize again at full window it now displays like this * [img4](https://onedrive.live.com/redir?resid=F2D0CDC94E5774A6!2583&authkey=!AHAEIncCGzjrsK8&v=3&ithint=photo%2cpng) * Questions: * a) When I’m in full windows I would like the calendar to display as 4) and NOT as 1) * b) number 2 looks good but the some titles are overlapping each other (I set the limit at 20 chars in the plugin). Any solution? * c) number 3 looks good for mobile. However in the day selected I have multiple events and I won’t be able to scroll down inside the pop up to see all of them. Is this only happening because I’m from laptop and not in mobile? * Thank you! * [https://wordpress.org/plugins/google-calendar-events/](https://wordpress.org/plugins/google-calendar-events/) Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/css-inconsistency/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-inconsistency/page/2/?output_format=md) * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213062) * Hey [@balux](https://wordpress.org/support/users/balux/), * So this is something that has come up for us before. The issue here is that when you are displaying the calendar in a popup or a modal box then the calendar will take the dimensions of the box into consideration for the responsive styles. So basically what happens is your box would be something like 600px wide for example and the plugin would use that value so it would make the responsive view show, even though it is on a desktop. * Things I have had people do in the past would be: * 1.Check how big the box is at the start of the page load and make sure it is big enough to display the default calendar. * 2. You could also try using CSS for parts of the calendar, but this would be my suggestion only if you can’t get 1 to work. * 3. Modify the plugin JS (this is where the responsive magic happens) – this option would be a last resort and I do not recommend this as the changes would be wiped every plugin update. * I think the other issues you are experiencing might just be because you are resizing the browser window and not actually using it to test on mobile. It could also be related to #1 above, where if you have a fixed size set to your modal then the plugin would still be reading from that value and if the screen is too small then it won’t know because the modal box is fixed. Not sure of your exact situation with that though so let me know if that’s not the case. * This is a little tricky of an issue without actually seeing it so hopefully I have been able to at least give you some ideas to mess with going forward. Let me know if I have not helped and we can continue on. * Thanks! * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213063) * Hi Nick, thanks for the reply! * My modal is actually full window..so basically is covering the whole webpage.. however, my main concern now is my previous question a). I noticed that if I change the month (in full window without any resize) it will then display it properly (as my img4). * I understood your response 1 but I don’t understand why then, when I first open the modal the calendar “won’t find the proper size” of the modal and if instead I just change month with the arrow, it will suddenly display fine..? * Thanks for your help! * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213069) * Is the modal width and height set before the page is loaded or is it set after the page loads? If it is using JS to set the size of the container when the page loads then that could be a reason why. * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213078) * Hi Nick, * that’s a good question and I’m not sure how to find this out. The js scripts are called at the beginning of the body tag (the modal is created inside it later in the page) but they are not related with the modal (they are bootstrap default). In the css (called in the head tag) I’m styling the modal as width: 100% but that’s it. However tomorrow I’ll put the website online so that I’ll be able to send you the link. * Thank you! * B. * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213130) * Hi Nick, * here’s the page [http://www.assatena.it/testbs/wordpress/](http://www.assatena.it/testbs/wordpress/) * the section in the white one called Sale Prove with the 3 round images. clicking the images will trigger the modals that contain the calendars * Thank you! * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213176) * [@balux](https://wordpress.org/support/users/balux/), * Sorry for the delay. Just took a look at your site, but I can’t seem to find where to get the calendar. Can you point me in the right direction? * Thanks! * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213177) * Hi, ok so: if you scroll down the section (by color) are: white (news), green( chi siamo), yellow(service), white(sale prove) and others. Go to the white section( 4th) Sale Prove. you see there are 3 green circles with images inside. click on those and you’ll open a modal with the calendar inside. Is that clearer? * Thanks! * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213181) * actually, a simple solution: in the menu navbar (top) click on the second title( Sale Prove) which highlits in red when hovered. This will take you straight to the section with the images 🙂 * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213190) * Thank you I was able to find it this time 🙂 * I am still looking around at it but I need more time to figure out if there is a solution. * I did see you have a lot of errors in the console also so I need to see if anything stands out there that could be causing the issue too. * I will get back to you with more detail as soon as I can, thanks for your patience! * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 2 months ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213193) * Hi Nick, thank you for you help! * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 1 month ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213203) * Ok sorry for the delay here. Let’s start off simple. You can try adding something like this to your CSS: * ``` .simcal-calendar { min-width: 1200px; } ``` * Adjust that accordingly to see if it makes a difference. * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 1 month ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213204) * Hi Nick! * This solution will definitely enlarge the overall width of the calendar but it won’t actually change its appearence (as you can see now). I tried also adding a similar code for height and the total height of the calendar is increased but it still displays in the “folded” way. * Thanks for your patience 🙂 * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 1 month ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213208) * Can you check in your JS that creates the popup if there is a way to set the initial height? Or let me know what it is that you are using to do that? * That is definitely what the issue is. You can see because if you change to another month you will see it shows the events normal because after it is loaded the size is correct. * Thread Starter [balux](https://wordpress.org/support/users/balux/) * (@balux) * [10 years, 1 month ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213215) * Hi Nick, sorry for the late reply. I am using bootstrap default js code to trigger the modal. I haven’t touch it as I was changing the modal size only through css. * Thank you! * B. * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 1 month ago](https://wordpress.org/support/topic/css-inconsistency/#post-7213219) * Ok I don’t know exactly what you would need to change then. * I would just look for any options to set the default size of the modal or if there is some CSS that can be changed to set the size larger from the beginning. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/css-inconsistency/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-inconsistency/page/2/?output_format=md) The topic ‘css inconsistency?’ is closed to new replies. * ![](https://ps.w.org/google-calendar-events/assets/icon-256x256.png?rev=1263960) * [Simple Calendar - Google Calendar Plugin](https://wordpress.org/plugins/google-calendar-events/) * [Frequently Asked Questions](https://wordpress.org/plugins/google-calendar-events/#faq) * [Support Threads](https://wordpress.org/support/plugin/google-calendar-events/) * [Active Topics](https://wordpress.org/support/plugin/google-calendar-events/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/google-calendar-events/unresolved/) * [Reviews](https://wordpress.org/support/plugin/google-calendar-events/reviews/) * 16 replies * 2 participants * Last reply from: [balux](https://wordpress.org/support/users/balux/) * Last activity: [10 years ago](https://wordpress.org/support/topic/css-inconsistency/page/2/#post-7213223) * Status: not resolved