Nature One – Make it mobil friendly

Home Forums All Other Themes Nature One – Make it mobil friendly

Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #20178
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    Shri,

    Thanks to your beautiful theme and your support, I know have a prototype homepage just as I wanted it:

    http://jartigas59.pairserver.com/cichlid.org/

    I am about to make it public but before that I have been asked to make it mobile friend. The theme alone does not seem to do this (at least in the main page). I have provisionally installed a plug (WPtouch Mobile Plugin) and it can render the site well, but the beautiful Nature One theme home page is not rendered unfortunately.

    Is there a plug in of a configuration that you would advice to sole this problem?

    Thanks for any help

    #20368
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24564
    • Total: 24564
    Member since: August 16, 2013

    Hi Juan,

    Instead of using plugin kindly add CSS code for this.

    Go to Appereance>>Theme Option>>Basic Setting>>Custom CSS
    Add this code in custom css box


    @media
    screen and (max-width: 29.938em) {
    .one_fourth { width:100%; margin:0;}
    .one_third { width:auto; margin-right:0;}
    .footer-column { width:auto !important; margin-right:0 !important;}
    }


    @media
    screen and (max-width:47.938em) and (min-width:30.000em) {
    .middle-align { width:440px !important;}
    .one_fourth { width:100%; margin:0;}
    .one_third { width:auto; margin-right:0;}
    .footer-column { width:auto !important; margin-right:0 !important;}
    }

    Regards,
    Shri

    #20451
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    Very nice!! you save me a plug in and made me stick with the same theme for both mobile and desktop display! There are just two other things

    First the slide info in the home page overwhelms the full slide, is teh a way to hide it in mobile view, I tried adding:


    @media
    screen and (max-width:47.938em) and (min-width:30.000em) {
    .slide_info {display:none !important;}
    }

    But it does not appear to work

    The other problem is that the background of the menu bar changes to white in mobile view and the menu entries are not visible, can it be configured in display view so they adopt the same colors than in desktop view or at least white over a black background?

    I think with these two changes the theme full be fully compatible with mobile devices!!

    Thanks so much!

    #20465
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24564
    • Total: 24564
    Member since: August 16, 2013

    Hi Juan,

    Add this code in custom css box


    @media
    screen and (max-width: 29.938em) {
    .header{ background:#000;}
    .toggle a{ background:#8e8e8e; color:#fff;}
    .header .header-inner .nav ul{ background:#8e8e8e;}
    .nav ul{ background:#8e8e8e; font-size:15px;}
    }

    Regards,
    Shri

    #20496
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    Shri,

    Beautiful!! Thank you ! Now it is how I want it. In fact .slide_info {display:none;} also worked, I was just not placing it for the vertical view, So nature one is now fully mobile compatible for me. I appreciate all your support

    With regards

    #20506
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    There is just a little thing.. when I visit an internal document (for example):

    American Cichlid Association ByLaws

    There is a pesky yellow line under the menu bar, the yellow is the footer background color. As it is in the mobile I can not seem to find the class. How can I make it black or make it disappear (preferably)?

    Thanks for your continuous support

    #20567
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24564
    • Total: 24564
    Member since: August 16, 2013

    Hi,

    Add this code in custom css box.

    h3.widget-title span{border:none !important;}

    Regards,
    Shri

    #20599
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    Thank you again Shri,

    I placed that code (h3.widget-title span{border:none !important;}) in the custom css box, inside:


    @media
    screen and (max-width:47.938em) and (min-width:30.000em) { }

    @media
    screen and (max-width: 29.938em) { }

    as well as outside, in no case seems to work though, the yellow line with the central down pointing triangle under the menu remains there.

    Could it be something else?

    #20616
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24564
    • Total: 24564
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>Theme Options>Basic Settings>Custom CSS box:
    And paste this css in custom box


    @media
    screen and (max-width:940px){
    #slider-page, .feature-shadow, #slider-page::before, #slider-page::after { display:none;}
    }

    Regards,
    Shri

    #20671
    Juan Miguel
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: January 17, 2016

    It worked! Thanks for staying with me to every detail. Now the site looks great both in desktop and phone. I appreciate it

    #20725
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24564
    • Total: 24564
    Member since: August 16, 2013

    Great 🙂

    Regards,
    Shri

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.