Nature One – Make it mobil friendly

[Juan Miguel]

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

[Sonl Sinha]

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

[Juan Miguel]

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!

[Sonl Sinha]

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

[Juan Miguel]

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

[Juan Miguel]

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

http://cichlid.org/?page_id=122

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

[Sonl Sinha]

Hi,

Add this code in custom css box.

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

Regards,
Shri

[Juan Miguel]

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?

[Sonl Sinha]

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

[Juan Miguel]

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

[Sonl Sinha]

Great 🙂

Regards,
Shri

[Author]

Posts