I see what you mean by “out of wack.” The items in the sidebar are not scaling to work with the narrower layout of the iPad view.
The images need changes to the CSS:
width: 100%;
height: auto;
For the form, ads, and Twitter feed need a maximum width for each media query. You’ll need to the width and padding of the sidebar to calculate this. You’ll find this information either in the code itself or by inspecting the code in the browser with a (free) tool like Firebug for Firefox.
To adjust the large screen view, for example, the sidebar width is 300px with 30px padding on each side. Take 300px and subtract 60px (30px for each side) to get 240px of usable space inside the sidebar. So, the code for the side bar in that media query would be:
max-width: 240px;
Repeat this process for each media query.
Hope this helps.
Thread Starter
Kenya
(@bijee)
So are you saying i need to first use that custom CSS above? and THEN calculate and update all of the media queries?
I know how to update it, but not sure what i need to update it to? or which ones i should update rather.
For the images: Without seeing your whole style sheet, I’d say use the aside#sidebar-primary selector. So, the CSS would look like:
aside#sidebar-primary selector{
width: 100%;
height: auto;
}
For the rest (form, ads, twitter feed), you’ll need to make the calculations for the remainder of the media queries and apply each amount as a max-width to the container div for each element and/or the element itself. If you run into trouble with the third party content, you might check with the vendor for tips to accomplish this.
