Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 30, 2015 at 9:42 pm #388529
    blaineglobal

    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

    January 30, 2015 at 10:27 pm #388557
    Yigit

    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

    January 30, 2015 at 10:43 pm #388573
    blaineglobal

    Hi Yigit

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

    Thanks.
    bg

    January 31, 2015 at 5:01 am #388690
    blaineglobal

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

    Appreciate your attention.

    February 2, 2015 at 3:10 pm #389337
    Yigit

    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

    February 2, 2015 at 3:26 pm #389349
    blaineglobal
    This reply has been marked as private.
    February 3, 2015 at 1:10 pm #390027
    blaineglobal

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

    Very much appreciate your attention and help!

    February 3, 2015 at 1:53 pm #390042
    Yigit

    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

    February 3, 2015 at 2:01 pm #390053
    blaineglobal

    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 9 years, 10 months ago by blaineglobal.
    February 3, 2015 at 2:48 pm #390095
    blaineglobal

    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

    February 3, 2015 at 3:15 pm #390108
    Yigit

    Hi!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    February 3, 2015 at 3:43 pm #390127
    blaineglobal

    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

    February 4, 2015 at 8:19 pm #390893
    Elliott

    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 9 years, 10 months ago by Elliott.
  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.