Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #16483

    Hi

    I’m in the process of taking my site off of the responsive layout.

    I saw this thread: http://www.kriesi.at/support/topic/iphone-1-column-layout

    And did the following:

    1 – in layout.css file, remove between lines 2034 and 2099.

    2 – open the grid.css file and also remove all the media queries in there (line 57-180).

    That seems to be working on most things, but when I make the browser smaller the navigation disappears and the all of the product images remain in their responsive state.

    How can I fix this so that everything remains as it is when the browser is at full width, on computer, ipad and mobile?

    Kind regards

    Kate

    #91651

    Hi,

    If you don’t mind me asking, what’s the reason behind your move away from responsive design? You don’t have to answer, but I am thinking of writing an article about this topic but haven’t found anyone who asked first, to use as a lead intro.

    You found the correct instructions http://www.kriesi.at/support/topic/disableremove-responsive-layout-within-propulsion-theme-revisited but there is another step not mentioned there, but is in this topic http://www.kriesi.at/support/topic/responsive-layout-woes-continue .

    Basically you need to open your header.php and remove the following line:

    <!-- mobile setting -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    And I found more media queries in

    Lines 1656-1775 in woocommerce-mod.css in config-woocommerce directory in the theme folder.

    I think that’s it, I went over all your css files. Please remove that block of css and the meta tag from the header and see if it’s the way you want it.

    Thanks,

    Nick

    #91652

    Hey Nick

    Brilliant thank you! That’s sorted out the products and it views perfectly on my phone now. The navigation still disappears though but I couldn’t see the block of css you mentioned? Is this the custom.css file?

    Kind regards

    Kate

    #91653

    Hi Nick

    Forgot to say that the reason for choosing a non responsive layout is that I was having lots of issues getting things to line up pixel perfect across multiple browsers. I guess speaking from a designers point of view, the look of the site is far more important to me and it will still function on an ipad/mobile the same way it does on a desktop which gives me some peace of mind.

    Kind regards

    Kate

    #91654

    Hi Kate,

    The css to be removed is in the woocommerce-config folder in the woocommerce-mod.css file.

    Regards,

    Devin

    #91655

    Hi Devin

    I’m not sure which code you mean sorry. I deleted the following from the woocommerce-mod.css file but it didn’t fix the problem:

    Lines 1656-1775 in woocommerce-mod.css in config-woocommerce directory in the theme folder.

    Kind regards

    Kate

    #91656

    Hi,

    Sorry about pasting it as if that was code. Please open up the woocommerce-mod.css in config-woocommerce directory, and make a backup copy of the file, then find line 1656 which looks like

    /* #Media Queries

    Starting from that line, delete everything until you reach line 1777 which looks like

    /*added for woocommerce 1.4 +*/

    You do not have to delete line 1777 itself. But everything in between 1656 and 1777 has to be removed.

    Thanks,

    NIck

    #91657

    Hi Nick

    Thank you but as discussed in my last post to Devin, I had already deleted those lines and it didn’t fix the problem.

    Kind regards

    Kate

    #91658

    *UPDATE*

    I gave the main menu a width of 680px. This stops the menu from disappearing when I decrease the size of the browser window. however, now I get a mobile main menu appear over the top of the nav instead when I decrease the size of the browser window.

    I’m not sure if I’ve made it better or worse by giving the menu a width but I’d like to now remove the drop down menu which is appearing now (I don’t need to worry that it will be removed on the mobile as my site is no longer responsive so this shouldn’t appear anyway).

    If an answer could get back to me asap, that would be super as it is the only issue I now have to fix.

    Kind regards

    Kate

    #91659

    Oh in that case just add the following css:

    #top .mobileMenu {
    display: none;
    }

    That should do it!

    Regards,

    Devin

    #91660

    Hi,

    Here is a quick fix for Quick CSS

    #mobileMenu_menu-main-menu {
    display: none !important;
    }

    However that part needs to be removed from jQuery since the rollover on the menu wont work now .

    [Edit] … and Devin beats me by 58 seconds!! Woot!

    Thanks,

    Nick

    #91661

    Fixed :-) Thank you all so much!

    #91662

    Let us know if you have any other questions.

    Regards,

    Mya

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Remove responsive layout of products and nav’ is closed to new replies.