Resto Theme not mobile compatible

[Eddel]

Hi,

I just create a website using the resto theme and I found out the it was not fitted in mobile and tablet(or really not compatible). Or if there’s any modification I need to do can someone tell me? You can check my website www.elmomento.com.ph to see the distorted titles on the Our Services part as well ass the menu bar is missing on tablet. But once I flip to vertical view on the mobile device everything seems fine.

I hope someone can help me with this.

Thanks

[Sonl Sinha]

Hi Eddel,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:768px) and (max-width:1023px) {
#todayspecial-box { height:147px;}
#todayspecial-box h2 { left:50%; transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); width:100%;}
}

Regards,
Dave

[Eddel]

Hi Dave,

Thanks for your help, it fixed the today special boxed alignment issue. How about the logo? The logo seems different in mobile, but looks fine in tablet and pc.

Thanks,
Eddel

[Sonl Sinha]

Hi Eddel,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:768px){
.logo img { height:auto !important;}
}

Regards,
Dave

[Eddel]

Hi Dave,

Appreciate your help, but after doing that, seems like the logo looks so small in mobile.

Thanks,
Eddel

[Sonl Sinha]

Hi Eddel,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:768px){
.header .header-inner .logo { position:relative; left:-30px;}
.header .header-inner .logo img { max-width:200% !important;}
}

Regards,
Dave

[Eddel]

Hi Dave,

That solved the case. Is it possible to change the background of the inner logo on mobile devices?

[Sonl Sinha]

Hi Eddel,

You mean logo background color or inner header background color?

Regards,
Dave

[Eddel]

Hi Dave,

I’m pertaining to the logo background in mobile and tablet which is currenty color gray.

Thanks,
Eddel

[Sonl Sinha]

Hi Eddel,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
.header-inner { background-color:#ffc600 !important}
}

Regards,
Dave

[Eddel]

Hi Dave,

It works! Thanks for your help.

Eddel

[Sonl Sinha]

🙂

[Author]

Posts