Responsiveness Problems

[BuroNCP]

Hi there,

First of all I would like to say that I really love the theme. Except for a few huge responsiveness problems. (See screenshots – for example windows phone)

– Main menu on the left is not fixed. I want it to be fixed and always there on scroll.
– Phone slider mock up is too large.
– Some text falls out of the screen.

Can you help me with this?
Thnx in advance.

https://www.videosupport.me/wp-admin
Support
SL614j0i@eg&7hl1Jf2RxqfV

[Veena]

Pls try the below custom CSS in themeoptions –

@media only screen and (max-width: 359px){
#site-logo a img.standard-logo {
    max-width: 200px;
}}
@media only screen and (max-width: 767px){
#mobile-menu, #mobile-menu-toggle {
    position: fixed;
}}

— Some text falls out of the screen – I didn’t find any issue, everything seems normal.
Pls see the screenshot.

[BuroNCP]

Thnx!

Do you know why the logo is unsharp on mobile/tablet?

[Raghavendra]

That’s due to retina display. We had earlier option to upload a separate retina logo for our themes Agile/Appdev but removed it for Fusion since it only served to confuse a lot of users and most did not seem too interested in it.

If you have a retina ready logo though, we can help you with some Custom CSS to display it nicely on both desktop and devices.

[Raghavendra]

Ok my bad, looks like you already have loaded the required code for retina logo but I see that image resolution is 260x46px. You need to double the resolution but retain the same width of 260x46px. Hence the image size would be 520x92px if it needs to display fine in all devices.

[BuroNCP]

Ok thnx, im going to try that.

Logo also doesn’t scale correctly on an iphone 5 screen. (see screenshot)
And is there a css code where we can adjust the menu color on mobile? Instead of the grey.

[Veena]

Pls use the below custom CSS –

@media only screen and (max-width: 359px){
#site-logo a img.retina-logo {
    margin: 0 auto;
    max-width: 80%;
}}
#mobile-menu-toggle i {
    color: #FFB143;
}

[Author]

Posts