Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #388529

    Hi All

    Here’s the site in question: ad2china.com.

    Having three issues with Enfold on mobile (specifically iOS Safari):
    1. The menu background color shows as white despite all attempts to change in Enfold settings and via CSS – how can we set the menu background color please.
    2. We have a Text Element inside a Color Section in the header – the text is not scaling on mobile and displays off the edge of the screen
    2. We also have an Image Element inside the same Color Section which is also not scaling properly on mobile

    We’d like to see the text and image in the Color Section scale properly for all display sizes.
    And to change the menu background color to a color other than white.

    Private image attached with screenshot from iPhone but it’s visible on any iOS device.

    Thanks.
    bg

    #388557

    Hi blaineglobal!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { color: #0000ff; }
    @media only screen and (max-width: 480px) {
    .home #av_section_1 .avia_textblock p strong { font-size: 36px!important; }}

    Regards,
    Yigit

    #388573

    Hi Yigit

    Just tried this and it did not produce any results.
    Display is exactly the same – appreciate your attention.

    Thanks.
    bg

    #388690

    Also – to be clear, all issues are ONLY on mobile (iPhone 6) display.
    Everything displays fine on desktop/web.

    Appreciate your attention.

    #389337

    Hi!

    Please make sure to flush browser cache on your mobile device. If that still does not help, do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    #389349
    This reply has been marked as private.
    #390027

    Hi – just following up to see if you’ve had a moment to take a look.

    Very much appreciate your attention and help!

    #390042

    Hey!

    I fixed some typos in Quick CSS but it did not help. Can you please try adding following code to Custom.css file which is inside Enfold/css folder and check if that helps

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    color: #0000ff!important; }}
    
    @media only screen and (max-width: 480px) {
    .home #av_section_1 .avia_textblock p strong { font-size: 36px!important; }}

    Also, Please make sure that wp-content/uploads folder has correct permissions ( 755 ) – http://codex.wordpress.org/Changing_File_Permissions

    Cheers!
    Yigit

    #390053

    Hi Yigit

    I’ve added this code to Custom.css but it’s not working.
    Also updated permissions from 775 to 755 (775 seems fine tho).

    Is there something else we can try please?
    Why would the CSS not work?

    Thanks for your continued help.
    Really need to fix this problem.

    Would be great if this was a menu option for the future too!

    Best.
    bg

    • This reply was modified 5 years, 1 month ago by  blaineglobal.
    #390095

    Hi Yigit

    My mistake, the fix DID work. Thank you!

    One more questions please:
    How can we color the background of the entire menu area for mobile only?
    We’d like to have the menu area background be dark grey or similar on mobile only.

    We tried using the regular color controls in Enfold > General Styling but it did not have an effect.

    Thanks again!
    bg

    #390108

    Hi!

    Please add following code to Quick CSS as well

    ul#mobile-advanced {
    background-color: #e2e2e2;
    }

    Best regards,
    Yigit

    #390127

    Hi Yigit

    This code did NOT work in either Quick CSS or Custom.css.

    Instead, how can we replace the logo for mobile only?
    We’d prefer to just use a different version of the logo instead.

    Thanks again for all your help!

    Best.
    bg

    #390893

    Hi!

    Add this to the bottom of your functions.php file.

    add_action( 'ava_after_main_menu', 'enfold_customization_second_logo' );
    function enfold_customization_second_logo() {
    	echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', '<img class = "mobile_logo" src = "URL to your image" alt = "" />', 'strong', true);
    }

    And replace the “URL to your image” with the correct URL. And then add this to your custom CSS.

    
    .mobile_logo { display: none; }
    @media only screen and (max-width: 767px) {
    .logo { display: none; }
    .mobile_logo, .mobile_logo .logo { display: block !important; }
    }
    

    Regards,
    Elliott

    • This reply was modified 5 years, 1 month ago by  Elliott.
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.