Paul’s #56
“At 481px”
Middle size screens are quicksand for side columns. I changed it to 582. Looks good on desktop but I don’t see that it’s gonna make a difference on middle size screens.
I have to choose what I’ll allow not to work because there’s no programming that will make it work for all screens. Your definition of what works is different than mine and you don’t seem to have a definition for what’s not working. When there’s no side columns it’s working for the page showing but as a whole website its not working because there’s no navigation for the whole site when there’s no side columns.
On narrow screen I lose the navigation side columns but accept it anyway because something is better than nothing.
On wide screens at one point I lost the side columns at 3/4 the screen, so I fixed it. The narrow center column you don’t like for wide screens is acceptable to me because if your on a wide screen and you see that narrow screen, most people will figure out that their browser has to be widened to widen the center narrow column, and if they can’t figure that out then there’s reason to believe they probably shouldn’t be reading the text anyway.
This leaves the middle width screens which there are relatively few of.
This in an inherent problem I created by choosing to use side columns, but it’s the navigation tools I want.
Middle sized screens means nothing really - its all about available width in px. All you are interested in is the pixel width that you make the media query change. If you change the view at 582px then that works for all devices that have that width available. There is some concept here that you are not getting or understanding or I am not putting across properly? If a design looks squashed at 580px (or whatever) then it will be squashed at 580px everywhere no matter what the device.
A 17" monitor would generally have a resolution of 1024px or greater and setting the media query to 582px means that you could close the browsers window by half before the media query clicks in. You’d have to be using a 14" monitor from last century to have an 800px resolution and even then it would make no difference because if the browser window was narrowed to less than the 580px you would still get the screenshot I already posted showing the middle column squashed beyond recognition and you would still need to change the design at that point.
It makes no difference what monitor you have as 480px will be 480px no matter what. It will always look like my screenshot. You will need to provide a screenshot of where you say its not working because as you can see from the screenshots we’ve all generated this is clearly not the case.
No you will have trapped some tablet users forever at that size. You can’t widen a browser wider than its display. You are missing the concept completely once again (and sorry to harp on about it I’m just hoping there will be alight bulb moment and it will all click ).
Yes there is just concentrate on the design and when the design is squashed throw in a media query and fix it. In that way you cater for everything. Of course your code needs to be organised better so that this approach works and retro-fitting old sites will have some problems.
No we have all (more or less) been singing the same song. You modify the design as required and if that means going from 3 columns to one then that’s what you must do.
You don’t actually lose them they just sit at the bottom because of your retro-fit design approach. Without re-designing the whole site properly you could simply display a menu link at the top of the page that sends people to the side columns now sitting at the bottom. You can reveal this menu link at the same time as you lose the sidebars in the same media queries. Alternatively create a smaller navigation that is revealed only on smaller screens and sits at the top of the document.
Generally for mobile you change the navigation into a hamburger menu for mobile and avoid clutter on the page. The problem with your site is that you are retro fitting an old fashioned method that was not designed with mobile or tablets in mind and therefore have to make compromises along the way.
Its not a real emulator as such. It just squashed the site into an iframe at the same size as the device. It does a few other things but doesn’t seem to work as well as the one built into chrome devtools and has no scrolling or touch emulation. The only fully accurate ones are the ones built in to the development SDK’s that I already mentioned. You can just as easily test in your browser rather than these faux ones but nothing beats the real device.
In order not to go around in continual circles I think you need to supply a screenshot of where you see the site breaking at 3/4 width on a 17" monitor so that we can understand what you are seeing? There is no scenario in my recommendations where the process will not work. Its all about the design and when the design needs to change.
I thought about a query for many screen sizes, see the code I found and placed in post 51, but I was advised, “Their aim is to chase down various devices, which is an impossible battle.” but now what’s said is, “There is no scenario in my recommendations where the process will not work”. Those are two competing positions for sure.
The bottom line is that I like the side columns (the only navigation I have for the site) and they factually don’t fit on smaller screens and mid size screens and I recognized that from the start. It’s nice that the side columns are at the bottom in smaller and mid size screens, but who is really going to reach them - some of my pages are over 9,000 words.
"You can’t widen a browser wider than its display. " I know that. That’s the quicksand of mid size screens. if I raise the 582 px to accomodate mid size screens it starts dropping the side columns at not so narrow browser widths on desktop screens.
I may be retro fitting, but I don’t have the awareness of other navigating methods on mobile, let alone program for them.
I’m very happy with the code you gave me Paul and your 120px addition looks fine.
I think the best approach for now is to put a link at the top of the page that says ‘Jump to navigation’ or something similar and then just use a fragment identifier to go to the bottom of the page ( a href=#col2) and then at the bottom of the page have a back to top link.
You can hide the link on widescreens by setting it to display:none by default and then in your media query just set it to display:block.
That should help people find the links more easily.
).