Wraps not working on mobile browsers

Hey guys, I’ve been searching around for ways to fix this issue I’m having, but not having any luck. If you visit guntrainerdesign.com on either an android or iphone, 50% of the container wraps are cut off. It seems like it would be a simple fix, but I’ve been at it for hours and not coming up with anything. Would one of you css experts be so kind as to have a look at the site on your mobile, and on your browser, so you can see what it’s suppose to look like. It would be very much appreciated. Thank you.

 

I missed your link.

g

 

thanks for the reply. I added it in there. Sorry about that.

 

Uhm... why isn't the site designed with a responsive layout? Resizing the page in a desktop browser doesn't exactly lend it much cred either...

 

Yeah I would get the website responsive asap... considering googles update about mobile friendliness is just around the corner.

 

Thanks for the replies. What makes it not responsive? It has the following code in the stylesheet:

/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */
 
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
 
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) */
@media screen and (max-device-width: 480px) {
 
 
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/* 

Code (markup):

What's it missing?

 

It also has this in the header:

    <!--  Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Code (markup):

 

This makes it not responsive http://gyazo.com/70b573f5f6e8e24d44436d19ea1eec1f

I'm not a coder so can't help you in that department but It does need some work. Someone will be able to help

Nice website though... really like it.

 

From top to bottom this site is a laundry list of how NOT to build a website; you have media queries, but a 480px breakpoint means jack **** when we now have phones at 800px or more, you shouldn't even be THINKING in px in the first place, and orientation shouldn't even be something you think about!

One of the big things about proper responsive and mobile friendly design is that doing it RIGHT just means making it the next logical step after all the other accessibility norms and practices we've been told for over a decade to use. That means No fixed widths, no fixed metric (px) measurements on fonts, legible colour contrasts, no using images for content text, it means letting flow do it's job, it means semantic markup (a sick euphemism for "using HTML properly"), logical heading orders and document structure, separation of presentation from content... and semi-fluid elastic design BEFORE you even THINK about making it responsive.

Instead you have the typical artsy fartsy nonsense common when you let some PSD jockey "designer" implement very pretty but ultimately useless to vistors bandwidth wasting garbage. Sure, it's an attractive site, but even on my 1920x1080 laptop there's so little useful content showing "above the fold" I cannot see how you'd expect that to be useful to visitors.

The use of numbered headings is gibberish (so many H1 which is the actual heading under which all content is subsections?), H4 without H3, H4 on things that aren't headings, H2 when you aren't starting a new subsection, paragraphs around non-paragraph content (or a complete lack of content), tags that never actually existed in a formalized spec and were stricken before five was finalized (like the idiotic "HGROUP"), equal width equal height design elements, STYLE inlined in the markup, lack of quotes around attribute values guaranteed to break parsing, comment placements that could be tripping rendering bugs in IE and FF (yes, I said COMMENTS tripping bugs), static scripting in the markup, scripting only elements in the markup...

Your home page is wasting 12k of HTML on sending 2.83k of plaintext and nothing I'd even consider a content image -- double or more what should have been used. Your ACTUAL content reads like it was written to the layout instead of the other way around, and in general the codebase reeks of having been designed from the attitude of "what it looks like on screen" instead of "saying what things ARE" so that CSS can say what they look like. This is quite evident from lines like this:

<div style="width: 870px; height: 405px; overflow: hidden;" id="slider">

Code (markup):

or this

<h1 class="edit-txt" id="n1">How long until my website is online?</h1>
<p class="edit" id="n2">

Code (markup):

or this:

<body class="home page page-id-99 page-template page-template-index page-template-index-php">

Code (markup):

Which of course is the dead giveaway that it's turdpress or something similar. Every time I see endless pointless idiotic halfwit use of classes like that I have the overwhelming urge to track down WP's lead developers and thin out their numbers.

This is going to sound harsh, but there is NOTHING I would even TRY to salvage from that mess; it's a laundry list of how not to build a website and blindly throwing code at the existing design is NOT going to fix it; this is because all those stepping stones on the road to accessibility one should have before making a site responsive are just flat out missing. That's why I'd toss the entire mess and start over.

The real laugh being said site is basically a glorified advert for trying to sell people site designs? OUCH. If that's typical of the work being done, I pity anyone duped into using said service; though the result is entirely what I come to expect when turdpress, jQuery, HTML 5, and PSD jockey design meet.

Pretty much if you care at ALL about accessibility, device neutrality or good practices, that's NOT how you go about it... and for all the talk of "mobile" and "Responsiveness" those are just new terms for what HTML was originally created to do; deliver content in a single master document in a device neutral manner!

Which is why when you create your document you should start with content or a reasonable facsimile of future content and organize it as if HTML doesn't exist, then when you add your markup you should do so to say what things ARE, NOT what they are going to look like as if your layout and CSS didn't even exist; then and only then do you bend that markup to your will with CSS for all the different layoutS (yes, plural) for all the different media targets you wish to customize for.

Hence why starting out worrying about appearance before you have content or completed base semantic markup is a back-assward approach no matter how many PSD jockeys claim otherwise and ignorant "wow that's pretty" suits are duped into believing the LIES.