Solved Templates

Mobile&tablet top bar and offcanvas menu showing different on each device

Asked by Federația Sindicatelor din Instituții de Cultură 2 years ago Last activity 2 years ago

I think after I added a a special row in the template style layout options, especially for addapting the top bar and header size for mobile&tablet devices, the whole structure kind of broke.
Now on 3 diffrent devices i'm getting diffrent elements positions (on mobile the top bar appear after the header and has diffrent color, the offcanvas menu is on the right and the tablet shows it on the left etc.).

https://prnt.sc/4XVDIsMNlOPg
https://prnt.sc/YCWx21IItJL-

  • the primary problems are: how to fix the top bar showing after the header problem on mobile view and with the same style as in the table view? Why is offcanvans menu showing on diffrent sides of the screen in mobile vs tablet protrait?

-the second thing, is there a more organised way to arrange the elements of a site in mobile view (i've made specific padding, margins, positions settings in sp page builder)? Because there are so many screen dimension out there, how can I know that what is showing properly on my S20 phone would look properly on an Iphone? Maybe a setting thate reduce/enlarge the elements size until it fits to a certain screen?

Here are 2 similar phones wich does not display the site the same:
https://prnt.sc/oZBEypPPufdw
https://prnt.sc/EhsPl67t6Jhw

Thank you!

Accepted answer

Marked as the solution
Ofi Khan Staff
2 years ago · edited

You are welcome 😊

I have fixed it on all of your template copies. I have changed in the layout and added this Custom CSS to

Template Options -> Custom Code -> Custom CSS

#offcanvas-toggler.offcanvas-toggler-right{
  margin-left: 0px;
}

@media screen and (min-width: 491px) and (max-width: 800px){
   #offcanvas-toggler.offcanvas-toggler-right{
       margin-left: 80px!important;
  }
}

Please accept the answer that helped you. It will be then easier to find the solution for the other users with the same issue. There is a button to accept answer after each comment.

I have a humble request too. It would be very kind of you if you can manage some moment to give us feedback on 

  1. Joomla Extension Directory
  2. TrustPilot

This will inspire us to improve.

5 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
2 years ago

Hello Federația Sindicatelor din Instituții de Cultură

I have used this CSS to this file

css/custom.css

.sp-contact-info li{
    margin: 0px !important;
}
ul.social-icons{
    margin: 0px !important;
}

I have also adjusted your layout in Template Options -> Layout

Also, I have renamed your original custom.css file to _custom.css file. Please reveiew your CSS written in there. There are lots of syntax error and it is creating issues on your site.

Best regards

Federația Sindicatelor din Instituții de Cultură Asked this
2 years ago

Hello

I can't use your suggested css code because i want those elements closer to the edge of the screen (an only through a negative margine value is working).

But the header&top bar problemes are resolved.
ONly the offcanvas menu (the 3 lines for menu access, and the postion of the menu after accessing it) is still showing differently in phone vs. table (one on the right, one on the left), and I want both on the right. The right canvas position settings in the template option doesent work.

https://prnt.sc/YCWx21IItJL-

Please help me with that.
Thanks

Ofi Khan Staff
2 years ago

I have asked the development team to check the issue. Thank you for your patience and time.

Ofi Khan Staff
2 years ago

Apology for the inconvenience. I have fixed your issue. Please check your site.

Federația Sindicatelor din Instituții de Cultură Asked this
2 years ago

Yes that fix the issue, except only the articles from my registered section (and only on table, phone is working fine), wich is still showing the offcanvas menu on the left instead of right:

https://www.fsic.ro/index.php/en/informari-si-ghiduri/informari/propuneri-modificari-statut-federatie
https://www.fsic.ro/index.php/en/informari-si-ghiduri/informari/selectare-reprezentanti-in-grupul-bns-pentru-propuneri-asupra-noii-legi-a-salarizarii

https://www.fsic.ro/index.php/en/depunere-documente-2

Thanks a lot!

Federația Sindicatelor din Instituții de Cultură Asked this
2 years ago

thank you very much. That solved all problems!

Ofi Khan Staff
2 years ago

You are welcome 😊

Log in to reply.