Nature One – Make it mobil friendly

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

Tagged: ,

This topic contains 10 replies, has 2 voices, and was last updated by  Forum Moderator 2 years, 2 months ago.

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
    Member
    • Topics: 0
    • Replies: 16876
    • Total: 16876
    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
    Member
    • Topics: 0
    • Replies: 16876
    • Total: 16876
    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
    Member
    • Topics: 0
    • Replies: 16876
    • Total: 16876
    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
    Member
    • Topics: 0
    • Replies: 16876
    • Total: 16876
    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
    Member
    • Topics: 0
    • Replies: 16876
    • Total: 16876
    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.