Changing the style of a calendar popup

ddantes
ddantes used Ask the Experts™
on
Our online reservation system requires visitors to use a popup calendar form to enter dates of their proposed reservation.  Someone recently complained that the calendar popups were too small, so I'm asking for Expert advice about how to enlarge them.  For clarification, I'm not asking for alternative reservation systems -- just for technical advice about enlarging the popups in our existing system.

I believe the calendar popup styling is controlled by the attached css file.  To reproduce the issue, please visit www.mauitradewinds.com/RezEasy/rezeasy.html  and select New Booking from the menu.   Please note that a different format is provided for tablet and mobile visitors, and nobody has complained about that.  However, for notebook visitors with a small screen, it may be an issue. calendar1.css

Kindly be aware that the centering of the calendar popups was a challenging issue for me.  In the past, the popups appeared too high, or entirely off the screen in some browsers or screen sizes.  Whatever adjustments may be made to the size of the popups, it will be important that they continue to appear close to the center of the screen, regardless of the browser or screen size.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Prasadh BaapaatWeb Designer & Developer

Commented:
Hi ddantes,
since you are looking into the calendar popup size issue on smaller screens, I suggest you use media queries and have 3 different sizes for desktops, notebooks/tabs & small screen mobiles.

after checking the CSS... I observed that most content in the tables is TEXT and you have used font-size in only 2 classes at start of the CSS (2 more classes for the arrows and combo )

so I guess if you add a few lines of CSS with media queries, it will increase the TEXT font-size and in turn push the table size to accommodate them... in turn making the table a bit bigger and more readable.

can you add below lines after all code in css and check how it looks on a smaller width devices

@media (max-width: 768px) {
.calendar, .calendar table {
     font-size: 13px;
}
@media (max-width: 480px) {
.calendar, .calendar table {
     font-size: 15px;
}

Open in new window


let me know your views.
thanks,
Prasadh
Prasadh BaapaatWeb Designer & Developer

Commented:
I did not read your post correctly and missed out that you have diff arrangement for mobile view....  a solution would be better if you target just the notebook size

@media only screen and (min-width:768px) and (max-width: 1024px)  {
.calendar, .calendar table {
     font-size: 13px;
}
}

Author

Commented:
Hello Prasadh:  Thank you for your comments.  I just asked the customer who complained about the calendar size, as to what device he was using.  He said it is a Windows Surface Pro 3 with a small screen.   Will the CSS code you provided help with that?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Prasadh BaapaatWeb Designer & Developer

Commented:
well I did not know surface pro resolution or screen size so I checked on google and here is what I found:

Screen size:
12"
Resolution:
2160 x 1440

no wonder... if someone has 2160 x 1440 resolution on a 12 inch screen everything is gonna look small and our text of 11px is definitely going to look even smaller.

and my earlier code is not going to help your client.

but we cannot have diff css for every client...  what may help you is font sizes in em but let me think on it a bit more and I will get back to you soon.

thanks,
Prasadh

Author

Commented:
Very kind of you to take an interest.  I'll await your feedback.
Web Designer & Developer
Commented:
I work using 2 diff sized monitors as they help me check sites on different resolutions and screen sizes.. one is 22 inch and one 17 inch.

I tested you calendar on many possible combination on my 2 monitors. I feel that the calendar looks a bit small on higher resolutions even on my 22 inch monitor.

I concluded that the visibility problem faced is on a higher resolutions, so we should add a couple of media queries for higher resolution and that should make your calendar more readable.

@media only screen and (min-width:1024px) and (max-width: 1280px)  {
.calendar, .calendar table {
     font-size: 12px;
}
} 
@media only screen and (min-width:1280px) and (max-width: 1440px)  {
.calendar, .calendar table {
     font-size: 14px;
}
} 
@media only screen and (min-width:1441px) and (max-width: 1768px)  {
.calendar, .calendar table {
     font-size: 15px;
}
}
@media only screen and (min-width: 1769px)  {
.calendar, .calendar table {
     font-size: 17px;
}
} 

Open in new window


you will have to test how it looks on diff resolutions + ask your client to look at in on his laptop as well... after feedback you can make minor adjustments and it should work for you I guess. I will also check on my machine when you add the css.

thanks,
Prasadh
Prasadh BaapaatWeb Designer & Developer

Commented:
my above css suggestion is based on GUESSWORK... so it needs to be tested before we finalize the diff resolutions and text sizes.

Author

Commented:
Thank you for your research and styling proposal.  It's been implemented now.   Please let me know how it looks to you.  

I temporarily removed the media query which presents the mobile version to iPad visitors, so I could look at the calendar popup on my iPad.  I could not see any difference in the calendar popup size or font, whether or not the calendar stylesheet contained the code which you supplied.  I was expecting to see larger font/popup on the iPad with the new CSS code.  Maybe I am overlooking something.
Prasadh BaapaatWeb Designer & Developer

Commented:
I checked and I did not find any difference in the calendar font size.... means the CSS is not targeting the diff resolutions and increasing the text font size as per css.

your page is loading in a frame I guess and your page does not have any CSS link in its source, so I cant make out if the CSS you said is indeed loading with the page.

Author

Commented:
The page which contains the calendar popups is loading in a frame.  However, the "child" page which appears in that parent frame is loading the stylesheet which now contains the adjustments you provided:  
<link rel="stylesheet" type="text/css" media="all" href="http://www.mauitradewinds.com/RezEasy/style/calendar1.css">

Open in new window

Prasadh BaapaatWeb Designer & Developer

Commented:
I checked using Inspect Element in Firefox... I see 3 stylesheets here... but I dont see my code added to the calendar1.css
styles
Prasadh BaapaatWeb Designer & Developer

Commented:
I can be sure its added only when I can see it in the right hand window in the inspect element.

I checked again by refreshing the page and reloading by Ctrl+F5, I still cant see the media queries in the stylesheet.

Author

Commented:
That's confusing!  Here is a screenshot of the end of the css file as it appears on the server, viewed from my FTP client...
End of calendar1.css code

Author

Commented:
You can also navigate to http://www.mauitradewinds.com/RezEasy/style/   and download calendar1.css
Prasadh BaapaatWeb Designer & Developer

Commented:
I can see anything inside the folder in above link... but when i checked this link - I got the CSS.... but WITHOUT the media queries in it.

here is a link you can check the CSS yourself: http://www.mauitradewinds.com/RezEasy/style/calendar1.css

plus I checked again with FIREBUG tool... I see the CSS but again without the medeia queries...  so my conclusion is that maybe some confusion is talking place in uploading the file...no media queries added
Prasadh BaapaatWeb Designer & Developer

Commented:
so unless we both see my code in the CSS in this link http://www.mauitradewinds.com/RezEasy/style/calendar1.css, we cant be 100% sure its added on the server :)

Author

Commented:
I can't understand why there is a discrepancy.  I followed the link you provided in your comment #40951187, opened the file, then copied the last section to my clipboard.  I'll paste it here:

/* Use larger font, which enlarges the calendar popups, for small notebook screens */

@media only screen and (min-width:1024px) and (max-width: 1280px)  {
.calendar, .calendar table {
     font-size: 12px;
}
}
@media only screen and (min-width:1280px) and (max-width: 1440px)  {
.calendar, .calendar table {
     font-size: 14px;
}
}
@media only screen and (min-width:1441px) and (max-width: 1768px)  {
.calendar, .calendar table {
     font-size: 15px;
}
}
@media only screen and (min-width: 1769px)  {
.calendar, .calendar table {
     font-size: 17px;
}
}
Prasadh BaapaatWeb Designer & Developer

Commented:
Great ! I checked and now the file is showing the media queries AND the font is increasing as per the resolution :)

now I see the size of calendar in 1920 X 1080 resolution is DECENT TO READ.

so I guess now you can ask your client to check if its readable now....
Prasadh BaapaatWeb Designer & Developer

Commented:
I also checked on my mobile which is a calling-tab 7 inches and the calendar is definitely readable now.

check on your ipad... the size of calendar should look bigger now.

Author

Commented:
I think this has really helped.  I can see the difference under IE11, Firefox and Chrome, when the screen resolution is high.  Unfortunately, there doesn't seem to be any difference under Safari, so my iPad doesn't demonstrate the change.  If you have any suggestion about that, please let me know.  I'll also ask the guest who mentioned this issue to check on his device.

I'm happy with the result -- it enlarged the popups and font, and didn't displace them from near the screen center.
Prasadh BaapaatWeb Designer & Developer

Commented:
my safari browser on desktop shows the increased font size fine, but safari on iPad and iPhone has to be targeted with a little bit different media query., it uses min-device-width .... the word device is extra

/* Use larger font for iPad and iPhone */

@media only screen and (min-device-width:768px) and (max-device-width: 1024px)  {
.calendar, .calendar table {
     font-size: 12px;
}
}

for further reference: here you will get a list of all different IOS media queries

hope this helped and let me know if you have any further questions.
thanks,
Prasadh

Author

Commented:
Thank you.  So, for every instance of min-width or max-width, shall I replace those with min-device-width and max-device-width?   Or will that interfere with all the other browser's behavior?
Prasadh BaapaatWeb Designer & Developer

Commented:
well the deeper you dig, more queries you will find for numerous devices and resolutions :)

as per me most of ios devices will be covered by that one single query I gave. I guess you should add that new query and stop at that for now.

in future if any new complaint comes again, you know how to deal with it now... just ask the customer his device and resolution... and you can take it from there i guess :)

but remember that you cannot satisfy each and everyone with his own different device...

Author

Commented:
Understood.  You've been a great help.
Prasadh BaapaatWeb Designer & Developer

Commented:
you are welcome :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial