Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #796683

    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

    #796690

    Hey Picante,

    Can you please provide a screenshot of the mac view?

    Best regards,
    Jordan Shannon

    #796696

    Hi
    Not sure how to attach a screenshot here?

    #796700

    Hi,

    You can post the link in the private area. If you need a service: https://snag.gy/

    Best regards,
    Jordan Shannon

    #797661

    These are screenshots that the Mac user has sent me. See how the buttons are not aligned and elements are overlapping.

    #797727

    Hi,

    Okay, thanks for the screenshot. I will send this case to a teammate to see if they can assist further.

    Best regards,
    Jordan Shannon

    #797738

    Hi,

    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,
    Yigit

    #797746

    But 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.

    #798148

    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 :-)

    #798195

    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,
    Yigit

    #798259

    I 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

    #798261

    Also, is there a way of making the header wider than the content container?

    #798300

    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,
    Yigit

    #801442

    I 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

    #802315

    Hi,

    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,
    Rikard

    #804433

    Hi

    I have tried this but it doesn’t seem to be working on tablet screens?

    #804821

    Hi,

    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,
    Rikard

    #804953

    OK – thank you.

    #805578

    Hello

    Could somebody please respond to this query before the temporary log-in runs out.

    Many thanks

    #806904

    Hi 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,
    Victoria

    #807915

    Help! This still isn’t working! I just want it to convert to the mobile (burger) menu when on a smaller screen.

    Many thanks.

    #809031

    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%;
    }

    #809888

    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

Viewing 23 posts - 1 through 23 (of 23 total)
  • You must be logged in to reply to this topic.