Jump to content
Stef's Coding Community
Sign in to follow this  

Ipad Vertical Widgets Not Showing Properly

Recommended Posts

Hi All,

I have been troubleshooting some issues for a friend's site and am stumped by one problem which happens on iPad vertical or around 855px browser width. On the home page the widgets that pull in from different pages do not align properly at this width, a solitary widget gets stuck on the right by itself although they are all floated left. They are fine above and below this width. What am I missing.

The site is http://thecenterschool.com/

Thanks for any help

Screen Shot 2013-12-15 at 12.08.31 PM.png

Share this post

Link to post
Share on other sites

It is being floated properly, it's just getting "caught" on the middle column (see screenshot).


I'm not sure exactly how you handle that... perhaps adding a min-height to help standardize the heights of the blocks? Or adding multiple media queries, adding "clear:both" to the correct items as the layout changes?


Share this post

Link to post
Share on other sites

Thanks for your quick response Ben. I had already figured that something was being pushed out of place but adding margin, padding and min-height did nothing.


I found the answer, thanks to Tony

Just as we both thought the problem is in the differing heights of the floated elements, so instead of floating he suggested:


display: inline-block;

vertical-align: top;


It works YAY

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...