1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Small Problem which is Stretching Page Width on Mobile, any help?

Discussion in 'CSS' started by misohoni, Jan 9, 2014.

  1. #1
    Solved! View solution.
    misohoni, Jan 9, 2014 IP
  2. #2
    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... :D ) 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.
     
    deathshadow, Jan 10, 2014 IP
  3. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #3
    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...
     
    misohoni, Jan 10, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Jan 10, 2014 IP
  5. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #5
    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
     
    misohoni, Jan 14, 2014 IP