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?
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.

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 MVEDeveloper & 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.
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.

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
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.

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

From novice to tech pro — start learning today.