Mobile View Of My Website is Different From Helix Preview (and From Desktop View)
Simmetria Institute
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
Rashida Rahman
Accepted AnswerHi 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
Accepted AnswerHi 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 ?
Ofi Khan
Accepted AnswerHello 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
Accepted AnswerHI! 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
Accepted AnswerHi 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
Accepted AnswerI 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
Accepted AnswerThanks for accepting the answer and hope that helped:)
Have a nice day!
Rashida Rahman
Accepted AnswerHi,
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
Accepted AnswerHi 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
Accepted AnswerHi there!
Unfortunately, I could not visit your given link this time.
Best Regards