3 replies [Last post]
nccfl1
nccfl1's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-5
Joined: 2012-11-15
Posts: 2
Points: 3

When looking at http://www.lacrosse-lounge.com on a normal sized monitor it looks fairly well but when you view it on devices like the iPad or smaller it becomes vary ugly and not that good looking. The three widgets on the bottom instead of being displayed horizontally become stacked above one another vertically which is very unappealing. Id like for them to stay horizontal and still be nice and readable and visually appealing, but i haven't go a clue on how to do that. I was looking into things like having the widgets in divs and putting heights and width of 100% or in Em's but it really don't know . Id just like those widgets to re-size accordingly, or something along those lines. Any information you can provide or suggestions are very much appreciated and I guess what im looking for are some snippets of codes i need to change or something. Im hoping that I can make it just look right when someone views this site on a ipad and stuff like that instead of just having to scroll to see each widget. I want them to resize accordingly when viewing on different screens.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need to add a new media query

At the moment your stylesheet is resetting the floating and width of those widget columns for layouts smaller than 800px wide. You'll definitely need that for smaller screens, because there's no way that you'll get all three columns across a 320px screen.

The width of the tall ad banner is 160px so the smallest screen that you'll get that to appear alongside the other two widgets when they take up equal space is 480px but that doesn't leave any room for spacing between the widgets or the layout's boundary, so it's actually going to need to be a bit wider than that.

So you'll need a new media query, e.g.

@media (max-width: 520px) { }

and move

#supplementary .widget-area {
	float: none !important;
	margin-right: 0 !important;
	width: auto !important;
}

from it's current position under the max-width:800px media query. That will mean that screens up to 520px will get the widgets in a single column, and then after that they'll be in three.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nccfl1
nccfl1's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-5
Joined: 2012-11-15
Posts: 2
Points: 3

So I think it may have made a

So I think it may have made a difference but im struggling to tell weather it did or not due to having to keep clearing cookies and history could you check and see if you notice a difference.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Cookies shouldn't have anything to do with it

Just refresh your browser to see CSS changes.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference