Hi, the page in question is: http://manchester.uncoverengland.com/manchester-visit-manchester-d2075779298.html On phone (based on max-device-width: 480px), it seems to stretch out. I know it relates to the describle.css only, but can't see what style is causing it? Any help thanks!
Not sure what you mean by "stretch out" -- but given that it's a crappy fixed width layout (haven't we had this discussion? Some of that code looks really familiar... ) with no responsiveness or media queries, what are you expecting it to do on mobile? you're not set up AT ALL to deliver to mobile -- so of course it has problems. Weird part is you seem to have added a media query, but it doesn't DO anything a media query should be doing in terms of actually changing the layout and stripping off the crap -- most of it seems to be a 100% copy of the normal screen layout -- a waste of code. Of course that jQuery bull, inlined CSS with another media query that doesn't look like it does anything a media query should be doing (and isn't working at ALL here), endless pointless multiple stylesheets just making the page take longer to load, id's, classes and endless DIV for nothing, unordered lists around non-list elements, SMALL tags for nothing, definition lists for nothing, lists in forms for whatever that "describable" crap is (dunno what the devil the point of that is, but it LOOKS like something that has no business on a website)... so on and so forth... Rip out the script-tard bull that violates the unwritten rule of scripting (if you can't make a page that works without scripting, you have no business adding scripting to it), the endless lists for nothing (if a list only has one LI, it's not a list. Form input/label pairs are NOT a list, if all you have is a DD it's not a DL), the stupid clearing breaks circa 2001 style code... and so forth. Might also help if your keywords was a comma delimited list of 7 to 8 WORDS that exist between <body> and </body> since that's what it's FOR. Again it's called keyWORDS -- not keyphrases, not keysentence, but keyWORDS!!! Getting rid of the type="x-icon" on the shortcut link since that can screw up some browsers, etc, etc... It's broken... badly... site-wide. Needs a good toss and cleaning -- possibly with a semantic markup rewrite and media queries designed to actually do something.
Thanks Deathshadow, I did use about 90% of your code though from before...the only thing that didn't work was reducing the h1 text behind the logo as it showed up on the mobile phone. Darn it, I'll have to re-review the site all over, but I would say it took me a couple of months to implement the changes you suggested last time. In terms of responsive design I wanted the site to stay a certain width, if I made it % wise then it would stretch out. However, I wouldn't mind if it reduced in size when the page was reduced...
That's why I'd have a media query remove one or the other... usually I axe the logo on mobile as a waste of bandwidth and battery. That's where semi-fluid comes into play -- you have a maximum width so lines aren't too long, but let it shrink to fit smaller displays. There's a reason my outer code usually reads something like: body { font:normal 85%/150% arial,helvetica,sans-serif; } #pageWrapper { min-width:40em; max-width:68em; width:95%; margin:0 auto; } Code (markup): The max-width usually varies, and I strip off the 95% width below a certain width (usually that 40em). The min-width is there for browsers that don't know media queries, and I use queries to strip that off too for mobile. Laugh is, how long ago did I help you with the original? I think it was before most of the CSS3 stuff was viable for deployment -- which it is today as long as you don't need it perfect in IE8/earlier. Would greatly simplify matters for you.
I think you helped me over a year ago! OK I implemented your changes page width changes, except for the LI stuff since there is an actual list - on some pages there's a url which goes under the other LI and am trying to get help for the Jquery. But the page still has the horizontal problem on a mobile? My desktop tests shows its not there but on the mobile screen (standard size) it's apparent! Anybody? thanks guys