-
Posts
-
Hi there
My website looks good on PC and iphone (using both Chrome and IE) but the layout is distorted when viewing on a Mac. Is there a setting that I’m missing?
Many thanks
Hi,
You can post the link in the private area. If you need a service: https://snag.gy/
Best regards,
Jordan ShannonThese are screenshots that the Mac user has sent me. See how the buttons are not aligned and elements are overlapping.
Hi,
Okay, thanks for the screenshot. I will send this case to a teammate to see if they can assist further.
Best regards,
Jordan ShannonHi,
I can reproduce the issue on my 15 inch MBP. I think the best solution in your case would be either to increase container width in Enfold theme options > General Layout > Dimensions or to decrease font size of your main menu items in Enfold theme options > Advanced Styling > Main Menu Links
Best regards,
YigitBut the issue is not just with the main menu items – it is throughout the site with buttons being in the wrong places. The site looks perfect on a PC screen and i-phone so I don’t really want to change the width or font settings.
Your response would be much appreciated. I have used the Enfold theme many times and have not come across this issue before, but really need to get it sorted. Hope you can help!
Many thanks :-)
Hi,
I checked your website on Safari, Opera, Firefox and Chrome and it looks the same on all these browsers.
Can you please post a screenshot from Win and attach temporary admin logins here privately? I would like to see how your site supposed to look and adjust on Mac accordingly :)Best regards,
YigitI have realised that it is due to screen size i.e. the menu items are quite long so when viewing on a smaller screen the menu is overlapping. I have enabled “mobile menu activation for tablets and smart phones” and also added this code:
@media only screen and (max-width: 1100px) {
.av-main-nav > li > a { padding: 0 7px; }
}but it is still not converting to the mobile menu on a tablet.
Please advise.
Many thanks
Hi,
1- Please refer to this post – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/
2- Please add following code to Quick CSS
#header .container { max-width: 98%; }Best regards,
YigitI have realised that it is due to screen size i.e. the menu items are quite long so when viewing on a smaller screen the menu is overlapping. I have enabled “mobile menu activation for tablets and smart phones” and also added this code:
@media only screen and (max-width: 1100px) {
.av-main-nav > li > a { padding: 0 7px; }
}but it is still not converting to the mobile menu on a tablet.
Please advise.
Many thanksHi,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 1024px) { nav.main_menu { display:none !important; } #advanced_menu_toggle, #advanced_menu_hide { display:block !important; } }Change the value 1024 to a higher value if you should want it to apply over tablet sized screens.
Best regards,
RikardHi,
Ok, thanks for the feedback. Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardHi Picante,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1180px) { .container.av-logo-container { padding: 0px; margin: 0px 30px; max-width: 95%; } #top .av-menu-button > a .avia-menu-text { padding: 5px; } .av-main-nav > li > a { padding: 0px 11px; } .logo img { padding: 55px 0; width: 50%; } } @media only screen and (min-width: 1180px) { .logo img { padding: 35px 0; width: 70%; } #top .av-menu-button > a .avia-menu-text { padding: 9px; } .av-main-nav > li > a { padding: 0px 13px; } .container.av-logo-container { padding: 0px; margin: 0px 30px; max-width: 95%; } } @media only screen and (min-width: 1365px) { .logo img { padding: 30px 0; width: auto; } .av-main-nav > li > a { padding: 0px 15px; } .container.av-logo-container { padding:0 30px; margin: 0px 60px; max-width: 90%; } }This code adjusts the logo and the menu a bit, so that the menu does not overlap the logo. Let me know if this works for you.
If you need further assistance please let us know.
Best regards,
VictoriaHelp! This still isn’t working! I just want it to convert to the mobile (burger) menu when on a smaller screen.
Many thanks.
I have inserted this code, but the full menu is still showing on a laptop sized screen (see attached screen shot).
@media only screen and (min-width: 768px) and (max-width: 1180px) {
.container.av-logo-container {
padding: 0px;
margin: 0px 30px;
max-width: 95%;}
#top .av-menu-button > a .avia-menu-text {
padding: 5px;
}.av-main-nav > li > a {
padding: 0px 11px;
}
.logo img {
padding: 55px 0;
width: 50%;
}Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Yigit
- You must be logged in to reply to this topic.