Hello. I am using the Blaskan theme with a custom child theme. I’ve been pretty happy with the ease of setup for this particular theme and I like the look and feel. One of the points of interest involving Blaskan was that it was touted as being very mobile friendly. After getting everything going and customized I noticed that my site displays very inconsistently on mobile devices. The sidebar shows up below the main content on most pages (not all of them, however). Does anyone have any suggestions on correcting this display inconsistency?
My site: http://www.punchdrunkwonderland.com/
I’d first clean up your 631 validation errors.
The first step towards browser compatibility is validation.
A lot of those errors are left over html markup in old posts. That’s one things. However, it seems many of them are theme and wordpress specific. For instance:
Line 155, Column 171: & did not start a character reference. (& probably should have been escaped as &.)
…unch-drunk-wonderland-gets-a-facelift/&via=pdwonderland&text=Punch Drunk Wonde…
This occurs because a post has an & in the subject that was not converted to & when posted. Shouldn’t wordpress itself handle that when it’s posted?
As far as the theme specific errors, does this mean Blaskan is just a dirty theme? To correct many of those errors I would have to more or less redo the entire theme.
Lots of themes do have errors and although it’s not ideal, in some cases it’s unavoidable because of standards changing or browser differences. But those are not really the problematic kinds of errors (including the one you mention) — they don’t cause problems on the page usually. A great many of your errors are due to outdated table code — so you could clean that up. But that also won’t likely cause the problems with the responsive question.
You do have a few errors that are related to missing or open or stray tags or elements in wrong places – and those ARE relevant to layout problems.
But it’s also likely that your child theme changes may be affecting how the pages resize. So you would need to look at what CSS is on the pages that work okay vs. those that do not. There is not an easy way to sort out problems like this, unfortunately. Validating the CSS code is also a good idea – although it’s the same as the other, that not all errors are a real problem. But the validator quickly finds everything — some of which might be relevant, so it’s a useful tool.
Also, if you are not using it, Firebug is a really great tool for working with CSS, so I’d recommend that as well.
Thanks. I’ll look into Firebug and will continue to try to clean up what I can.
As far as the pages that do and don’t work on mobile devices…even the ones that correctly show the sidebar on the side have problems. The most common problem when the sidebar is correct is that there is a large amount of space above the main content. The “About” page (http://www.punchdrunkwonderland.com/about/) is an example of this.
Thanks again for your help.
I looked at this a bit more, and from what I can see, if you disable the child theme styles, the resized displays okay. The sidebar is supposed to go below the main content section on small devices, and without the child styles it does so.
Just to clear on this so you’re not pulling your hair out needlessly :), clearing up errors won’t necessarily fix the resize problems – you can have perfectly valid code that won’t work correctly if it is overriding the original code that resizes…
- The topic ‘Blaskan Theme – Sidebar inconsistent on mobile devices’ is closed to new replies.