Support » Theme: Customizr » small device elements not stack

  • Resolved andrewf9

    (@andrewf9)


    http://torillfonn.com

    Hi, Until recently, I had this site working responsively on small devices. However, yesterday I found that you cannot see anything below the breadcrumb on e.g. small mobile telephone. The nav menu works properly but no left sidebar or any elements below the breadcrumb show until the viewport gets wide e.g. over 760px.

    The only way i can get the site to behave responsively on small devices is to disable both sidebars, but that is not what i want!

    I have done research into Twitter bootstrap 2 grids and responsive design, but cannot nail down the root cause? I am using a child theme of Customizr. Have added some custom CSS but was working fine until up until now. Recently upgraded the site, plugins and themes to WordPress 4.0. What I have tried to figure out is how the CSS re-jigs the sidebar(s) so they stack in one vertical column. It seems like the mechanism for that needs re-enabling? Thank you in advance..

Viewing 7 replies - 1 through 7 (of 7 total)
  • Did you look in Customize>Responsive settings>Enable/disable blocks reordering on small devices?

    Hi, Thanks, yes, i did look there. I checked theme settings and when I found that one, I thought I might have found the root cause! But it was already enabled. I have been using firebug responsive and have found out that at 800 screen width the left sidebar loads (scaled down in size), the dropdown menu appears and I can retrieve content e.g. load the home page. This works at even smaller screen/ device size. But the single column stack is not happening at all.

    I upgraded customizr theme recently. I notice some changes, e.g. they now have two versions of each .css, one minified. However the unminified one is minified, too. I am not sure if there may be some teething problems with the new theme, therefore impacting on my child one? My hosting company has also introduced their own ‘optimised’ version of wordpress available as a softaculous script. I am keeping the older unoptimised version. So could it be down to some kind of page caching that they have introduced?

    I can confirm that this is a possible bug introduced into the latest version of the Customizr theme. I have reported it to the theme author, Nicolas. The new version has some structural changes and this might be impacting on my site but possibly not on all upgraded sites?..

    Theme Author Nicolas GUILLAUME

    (@nikeo)

    Hi Andrew, can you try
    1) to disable (temporarily) all plugins (and custom javascript code) on your website
    2) refresh your browser cache
    => see if it fixes the issue.
    Thanks

    Hi Nikeo, Thank you for responding!
    I have set up a staging copy of the production site and have done a lot of trial and error.

    Just tried your above steps but no change. However, the trial and error I have done over the past few days has helped to narrow down and reduce the scope of the problem.

    Here is summary of what i have done so far:

    a) Restored a copy of the ‘old’ version of your customizr theme into the ‘themes’ directory of my site. The single stacking feature began working again.

    I want to use the latest version of your theme, however, so tested it out with rebuilt versions of my child theme (I assumed that it is my child theme which although it works okay with the ‘old’ version of your theme, is the source of the problem with your new version.

    b) So i rebuilt the child theme strictly according to ‘best practice’ on your Customizr documentation site. So moved my custom CSS into a ‘style.css’ file. However, i found that i needed to @import the ‘grey.css’ file (this was not explained in documentation) from the parent theme. I then added my custom CSS to the style.css file (in the child theme root folder).

    Then most of the pages began stacking in single columns on small mobile device screens e.g. around 300px x ? resolution.. So the only issue now is that i have a custom post type called ‘myraces’. I have created a couple of custom templates to display these: and archive template and a single template. The archive templates displays a list of the ‘my races’ etc…

    These pages are not displaying in single stack on small mobile screens. I guess this is due to my dodgy CSS classes used to wrap fields in the templates. I may be using one or two div classes that upset the responsiveness of the site under your latest theme but which I got away with using under the ‘old’ version…

    If you have any ideas on this, would be really useful! Otherwise i will probably try rebuilding the templates and experimenting with various twitter bootstrap classes inside them to try to make the pages fully responsive i.e. displaying in a single stack on small device screens.

    Hello Nikeo and rdellconsulting,
    I managed to track down the problem. The problem turned out to be a class inside a couple of custom templates i created. I checked out the example custom template and changed a couple of div classes in line with best practice. Then the child theme began working responsively again.

    So it was ‘human error’. I also removed custom CSS from the grey.css file according to best practice for Custmizr and copied it into the style.css file for my child theme.

    Thanks,
    Andrew

    Theme Author Nicolas GUILLAUME

    (@nikeo)

    Thanks for the feedback @andrewf9!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘small device elements not stack’ is closed to new replies.