Remove responsive layout of products and nav

13 posts from 4 voices

• Started 8 months ago by cutecreations
• Latest reply from Mya
• This topic is resolved

Tags:

No tags yet.

1. 

   cutecreations
   Member

   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

   Posted 8 months ago #
2. 

   Nick
   Moderator

   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

   Posted 8 months ago #
3. 

   cutecreations
   Member

   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

   Posted 8 months ago #
4. 

   cutecreations
   Member

   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

   Posted 8 months ago #
5. 

   Devin
   Moderator

   Hi Kate,

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

   Regards,

   Devin

   Posted 8 months ago #
6. 

   cutecreations
   Member

   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

   Posted 8 months ago #
7. 

   Nick
   Moderator

   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

   Posted 7 months ago #
8. 

   cutecreations
   Member

   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

   Posted 7 months ago #
9. 

   cutecreations
   Member

   *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

   Posted 7 months ago #
10. 

    Devin
    Moderator

    Oh in that case just add the following css:
    

    #top .mobileMenu {
        display: none;
    }

    That should do it!

    Regards,

    Devin

    Posted 7 months ago #
11. 

    Nick
    Moderator

    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

    Posted 7 months ago #
12. 

    cutecreations
    Member

    Fixed :-) Thank you all so much!

    Posted 7 months ago #
13. 

    Mya
    

    Let us know if you have any other questions.

    Regards,
    Mya

    Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.