Having a problem resizing calendar header in a table

I'm using a plugin for Wordpress called Event Organizer. There is a great full calendar shortcode.
Everything looks fine on desktop, but when I look at it in portrait view in iPhone the header hasn't resized. Is there anything I can do about that?


Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
GaryConnect With a Mentor Commented:
If you reduce your padding on the left/right icons and hide the Today span in your media queries you could get away with it fitting without too much hacking away at it.
Something has to give without redesigning the layout of it.
COBOLdinosaurConnect With a Mentor Commented:
The problem is that you have it in the least flexible element in HTML; a table.  There is not enough room for the total required for content, padding margins and borders; and tables will not adjust the may many other elements do. The invalid code in the page may also be contributing to the problem.

Validate the code and get rid of the obsolete code first, Then you will need to look at the size of the font you are using for the header bar.  You have an HTML5 doctype, and HTML5 has very little tolerance of invalid and obsolete code.

Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
The site is using @media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and for some reason the calendar portion is being targeted and not the table head.  You just need to create an extra media query for the small screen that targets that table head row.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Thanks guys!
All three of you aided me here. A break down.

@COBOLdinosaur: I went to validate the page, (I plan on validating the entire site, maybe I should do this as I code!) a lot of the obsolete code is coming from plugins that I'm using. One being a testimonial plugin. Seems the guy is pretty old school in his coding practices...Might have to make my own in the future. At any rate, Your suggestion to reduce font size contributed to the solution.

@padas: I'm actually building the theme mobile first, so the main CSS is for mobile phone and media queries are targeting the desktop and tablets. Yet, your suggestion encouraged me to try pulling some of the mobile CSS down into the desktop media query.

@GaryC123: Spot on. Followed everything you said. I gave the padding a percentage instead of em and it works like a charm!  I'm a little bothered by the extra padding at bottom and top of icons and month/week buttons respectively, but I think I can live with it. I've anal-ized over this site far too much already.

Also, nice to get advice from the years top 3 CSS ninja gurus in one thread.
maybe I should do this as I code!

It generally save time.  Nothing worse then having to go back and make markup changes because of a small error.

Seems the guy is pretty old school in his coding practices  

The biggest problem with obsolete code, is that it can stop working at anytime.  Once something is put into the obsolete classification, the browser manufacturers are free to drop support at any time and without warning.  Making something obsolete is basically a message to developers to quit using or pay a proce down the road.

Glad the collaboration worked out for you; we like working together.

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.

All Courses

From novice to tech pro — start learning today.