Twenty Fourteen Width Breakdown

Wow originally posted two weeks ago, and no answers???

This doesn’t leave much hope that I can get a question answered in a short timeframe…

Great question by the way Tank, I’d very much like to know the answer as well.

Dude, constant disappointment around here when it comes to questions getting answered. For the default theme, you would think there would be plenty of people able/wiling to help.

Anyway, good news is I had to figure most of it out on my own. If you have the default 1280px width set, your screen will essentially look like this :

FROM LEFT TO RIGHT :
50px of black margin
162px of actual primary sidebar content
10px of black margin
672px of “content width”, of which :
~100px margin on left of text
~474px of text block
~100px margin on right of text
60px of margin before content sidebar
305px content sidebar

That is, within a few pixels, how it breaks down.

I spent a week playing with this – let me know what you want to do and maybe I can save you the hassle ??

My issue is I’m creating a site https://www.fishinginmaui.com, it work well on a pc/mac, but not on the IOS devices (tablets). My basic problem is the theme responds with only 60% width, which kills my header info (branding). I’d like to increase this parameter to give the 100% width as most media devices now have the ability to scale as needed.

My second problem is the ain menu across the top disappears behind the 3 line button, which does nothing when viewed in landscape fashion, only if you turn the iPad upwards (back to portrait) will it work.

Lance

If you have a question related to a specific theme, then you should post your question in the theme’s support forum. For Twenty Fourteen, that forum is here. Not to say that you will always get an answer, but you are more likely to get a response from either the theme developer or someone who is familiar with the theme.

Lance, the problem with your site’s responsiveness is that you are using a table for layout in the header. Tables are notorious for not being responsive, i.e., they will not resize properly in response to different viewport sizes. Especially in this case, since the height & width are set in an inline style. Instead of tables, DIVs should be used for layout in a responsive design. I’m not sure what you mean when you say that you want the width to be 100%. Do you want your site to be fixed instead of responsive or fluid? Your site will be too difficult to read on mobile devices if to set it to fixed.

The 3-line button that appears on mobile sizes is referred to as a “hamburger” menu, or a mobile menu. It takes the place of the normal navigation menu on mobile devices.

okay, I took the easy way out because divs can be a pain in the @$$, so I got a lil’ lazy. However the real problem is that the display on IOS devices is so severely limited. These devices have their own tech to scale full sites, why are we cheating them when they choose full site?

So you’re right, I don’t want it fixed but lopping off 35% of usable, viewable space is crazy…