Mobile&tablet Top Bar And Offcanvas Menu Showing Different On Each Device
Federația Sindicatelor din Instituții de Cultură
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!
Ofi Khan
Accepted AnswerYou 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
This will inspire us to improve.
Ofi Khan
Accepted AnswerHello 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ă
Accepted AnswerHello
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.
Please help me with that. Thanks
Ofi Khan
Accepted AnswerI have asked the development team to check the issue. Thank you for your patience and time.
Ofi Khan
Accepted AnswerApology for the inconvenience. I have fixed your issue. Please check your site.
Federația Sindicatelor din Instituții de Cultură
Accepted AnswerYes 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ă
Accepted Answerthank you very much. That solved all problems!