Solved Helix Framework

Mobile view of my website is different from helix preview (and from desktop view)

Asked by Simmetria Institute 2 years ago Last activity 2 years ago

Hi!
I'm having issue on the mobile view om my website:
I'm using JOOMLA 5.1.0
Helix Framework 2.1.1

I can see from my DESKTOP view in the TOP bar the Social ICON, The search modulo , the login module and the FLAG for languagess switch.

These feature should be also visible in my mobile version of website.
I fact from my HELIX Framework preview - I see all these feature.
And even if I try to resize the browser window and make it small - like a MOBILE pHONE - I still can see everything.

But when I browse the website with a real mobile device (smartphone) this features are missing:

Language Switch
Search module
Login Module.

Only the social icon are visible.

See:
Desktop view: https://prnt.sc/IsyQOE7oPGSN
Mobile view from Helix preview: https://prnt.sc/QE-9fS_bNa83
real Desktop View - resized: https://prnt.sc/4Y_XvSu3ET7Q
But real View from MOBILE device - do not appear as expected. https://prnt.sc/VQ-dXTT9nniC

Accepted answer

Marked as the solution

Rashida Rahman Staff

2 years ago · edited

Hi there!

Thanks for reaching out.

It seems the following custom CSS is causing issue for you:

https://share.cleanshot.com/QKBWFTBt

Please remove the indicated part in the screenshot. OR, use the following code instead into the custom CSS:

@media (max-width: 402px) {
    #sp-top-bar .sp-module {
        right: 0 !important;
    }
}

Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best Regards

Simmetria Institute Asked this

2 years ago

Hi again.
NOW the header is appeared even from MOBILE device.
Anyway there is still something to fix.
The preview from PC and HELIX console is this ONE:
https://prnt.sc/dKhK2jTFPPZz
BUT - the real VIEW from My Android Device il this one:
https://prnt.sc/El55oPkNWMbI

How can I fix it ?

9 more replies

Ofi Khan Staff

2 years ago

Hello Simmetria Institute

Apology for the inconvenience. Please share your administrator access here to check the issue. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup with you before sharing.

Best regards

Simmetria Institute Asked this

2 years ago

I will give access to TEST enviroment for your analisys.

Simmetria Institute Asked this

2 years ago · edited

HI!
I changed your code and change this:
from this:

@media (max-width: 402px){
#sp-top-bar .sp-module {
right: 336px;
}
}

with yours:

@media (max-width: 402px) {
    #sp-top-bar .sp-module {
        right: 0 !important;
    }
}

But the problem is not solved.

Rashida Rahman Staff

2 years ago

Hi there!

If you just remove your existing code then it should be okay. Where did you put the code, please? May I have your admin access to check? Before giving access, kindly make sure you have a full site backup.

Best Regards

Simmetria Institute Asked this

2 years ago · edited

I change into the section "custom CSS" of my template Style
from this:

@media (max-width: 402px){
#sp-top-bar .sp-module {
right: 336px;
}
}

to this:

@media (max-width: 402px) {
    #sp-top-bar .sp-module {
        right: 0 !important;
    }
}

Rashida Rahman Staff

2 years ago

Thanks for accepting the answer and hope that helped:)

Have a nice day!

Simmetria Institute Asked this

2 years ago

I try to correct as per your suggestion... but unfortunately do not work on my production enviroment.

Rashida Rahman Staff

2 years ago

Hi,

Please use the following code in your custom CSS:

#sp-top2 .sp-column.text-center.text-lg-end, ul.social-icons, .sp-module-content .mod-languages ul.lang-inline {
    display: flex;
    align-items: center
}

Hope this helps!

Best Regards

Simmetria Institute Asked this

2 years ago

Hi Rashida.
With this code added to custo CSS of my template Style is going better... ma still not perfect...
Now the social ICON (one of two I have goes behind the LOGO)

You can see in my test site - browsing with MOBILE device.
THX

Rashida Rahman Staff

2 years ago

Hi there!

Unfortunately, I could not visit your given link this time.

Best Regards

Simmetria Institute Asked this

2 years ago

Sorry !
My new test site is changed .
Now you can visit at this URL (see below)

Rashida Rahman Staff

2 years ago

Well, thanks!

You can avoid this by lowering your mobile logo height. You can do this from the basic tab of your Template Options.

Currently it's 120 px, I thing 100px value would be enough to make your social icon visible.

Best Regards