Changing the style of a calendar popup

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.
ddantesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
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
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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;
}
}
0
ddantesAuthor 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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Prasadh BaapaatWeb Designer & DeveloperCommented:
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
0
ddantesAuthor Commented:
Very kind of you to take an interest.  I'll await your feedback.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
my above css suggestion is based on GUESSWORK... so it needs to be tested before we finalize the diff resolutions and text sizes.
0
ddantesAuthor 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.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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.
0
ddantesAuthor 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

0
Prasadh BaapaatWeb Designer & DeveloperCommented:
I checked using Inspect Element in Firefox... I see 3 stylesheets here... but I dont see my code added to the calendar1.css
styles
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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.
0
ddantesAuthor 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
0
ddantesAuthor Commented:
You can also navigate to http://www.mauitradewinds.com/RezEasy/style/   and download calendar1.css
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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 :)
0
ddantesAuthor 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;
}
}
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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....
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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.
0
ddantesAuthor 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.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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
0
ddantesAuthor 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?
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
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...
0
ddantesAuthor Commented:
Understood.  You've been a great help.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
you are welcome :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.