small devices - glitches

ChancyRat

I am basically clueless with using devices on my site. However, I have had complaints, sooo ... reluctantly I checked via http://quirktools.com/screenfly/ for what I see.

I know I added a ton of code to the site-wide CSS, but I did that by rote, rather than by smarts.

The home page looks fine. Yay!

A couple of questions, hopefully easy ones:

1. The menu on the homepage - which I think is my top menu, looks great, except it might be nice to have it default to open all submenus.
2. How do I get rid of (or make functional, whichever) the gray blanked out top menu that shows on every folder or gallery? (see image).
3. It's not possible to scroll left and right, and using the finger method to squinch to a smaller size, doesn't work either. This renders reading impossible.
4. I notice that my customized backgrounds on individual galleries, show on the devices. Is it possible to easily revert to the site-wide theme background image only, for devices?

Thanks.

Allen

How have you sized these boxes? A set width or using margins? Should be able somehow to set so they resize with narrowing.

ChancyRat

Allen wrote: »

How have you sized these boxes? A set width or using margins? Should be able somehow to set so they resize with narrowing.

Allen, is there a proper combination that I should be using? I'm inconsistent.
But, it also appears that any variable will "fix" width: whether that is a content block's margins, a content block's container width (which is set in pixels only, right?), or the body width of the page, or the site's stretchy or fixed status, or an html box width.

Some of my pages are stretchy (is that what I need to set?).
Some are fixed to a set width. (isn't that for the maximum?)
If stretchy is on, sometimes the body content just goes wildly spaced - do I have to allow that to allow a device to resize?
Do content blocks' margins, widths, matter?

Do you have pages that can be resized effectively on devices? If so, what settings did you apply?

SmugSam

Hi Chancy,

Thought I would jump in and try and help with one of your items. I had a nightmare trying to get my site close to reasonable on smaller screens.

The grey "Menu" box in your screenshot is what happens to a Menu content block containing more than one link when viewed on smaller screens - if they have more than one link, they get rolled up into a combined box (I assume to save screen real estate). Then you click on them and they expand to show the menu items/links. If you have multiple Menu nav blocks on your page, you get multiple boxes all labelled "Menu" on a smaller screen. Not ideal. From my (very limited) knowledge, there are two ways you can work around this (also neither ideal):

- create all your Menus in HTML instead of using the content blocks
- create each link in it's own separate Menu content block (so there is only one link in each) then selectively show/hide the menu items you want, where you want

I did the second. As I said, not ideal. And not a scaleable approach for a larger site than mine. But at least I don't have those big square boxes with "Menu" on them all over my site on smaller screens.

Hope that helps.

Sam

ChancyRat

SmugSam wrote: »

Hi Chancy,

Thought I would jump in and try and help with one of your items. I had a nightmare trying to get my site close to reasonable on smaller screens.

The grey "Menu" box in your screenshot is what happens to a Menu content block containing more than one link when viewed on smaller screens - if they have more than one link, they get rolled up into a combined box (I assume to save screen real estate). Then you click on them and they expand to show the menu items/links. If you have multiple Menu nav blocks on your page, you get multiple boxes all labelled "Menu" on a smaller screen. Not ideal. From my (very limited) knowledge, there are two ways you can work around this (also neither ideal):

- create all your Menus in HTML instead of using the content blocks
- create each link in it's own separate Menu content block (so there is only one link in each) then selectively show/hide the menu items you want, where you want

I did the second. As I said, not ideal. And not a scaleable approach for a larger site than mine. But at least I don't have those big square boxes with "Menu" on them all over my site on smaller screens.

Hope that helps.

Sam

Whoa nellie! That's a chunk of fixin'. Thank's Sam. I can't possibly re-do my menus so I'm happy to live with the grey box. Like most code for these things, I wonder if there is CSS to change the color of the grey, and even the word Menu? Like, if I could make it a nice color, and call it "Click for main menu" or something along those lines.

Are you able to reduce the size of the text you see on screens, and scroll left and right to read it all?

SmugSam

ChancyRat wrote: »

Whoa nellie! That's a chunk of fixin'. Thank's Sam. I can't possibly re-do my menus so I'm happy to live with the grey box. Like most code for these things, I wonder if there is CSS to change the color of the grey, and even the word Menu? Like, if I could make it a nice color, and call it "Click for main menu" or something along those lines.

Are you able to reduce the size of the text you see on screens, and scroll left and right to read it all?

I would imagine that the colour grey, and the size of the text, are all controlled at a base level by your theme. For example, on my site the "Menu" box was a different colour, in line with my theme. I am sure there is a way of changing these things through CSS, but I am very much a learner in that arena - most of the stuff I have done is copied from on these forums, then tweaked a little! Sorry.

Sam

SmugSam

I have to correct myself around the behaviour of those Menu content blocks on mobile devices that I describe above. I am wrong in my comment that the Menu content blocks "roll up" into a single box with "Menu" on it on smaller screens if they contain more than one link. I had forgotten (it has been a while since I went through this!) that there is actually an option under each Menu content block to "Collapse for mobile". This setting controls whether the individual menus show all the links they contain individually, or whether they roll them up into that grey Menu box you're seeing. The default is for this to be set to "on".

Sorry to mislead you! Give it a try if you want to see the difference.

Sam

ChancyRat

SmugSam wrote: »

I have to correct myself around the behaviour of those Menu content blocks on mobile devices that I describe above. I am wrong in my comment that the Menu content blocks "roll up" into a single box with "Menu" on it on smaller screens if they contain more than one link. I had forgotten (it has been a while since I went through this!) that there is actually an option under each Menu content block to "Collapse for mobile". This setting controls whether the individual menus show all the links they contain individually, or whether they roll them up into that grey Menu box you're seeing. The default is for this to be set to "on".

Sorry to mislead you! Give it a try if you want to see the difference.

Sam

Thanks!

To my embarrassment, I had never tried clicking the grey menu block. When I saw it I thought it was showing a "greyed out" link. Clicking it very nicely does open the full menu easily. Now if I could change the grey... and give it a term that us user-friendly...

... and figure out how to make scrolling an option...