Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • January 19, 2018 at 3:01 am #899436
    saucyhotdesign

    Hi – I have recently found there are settings you can change to set screen options on each element. This was going to solve some issues I was having on mobile view and excitedly set some settings. However none of the customization I set show up. I have tried setting different font sizes for captions, and have tried hiding and showing different elements on different screen sizes. Instead both elements show on all screen sizes instead of one on larger and one on smaller.

    Why are the ‘screen options’ not working for me?

    I am using 4.2.1, updated today, using latest WordPress also updated yesterday.

    Thanks.

    January 19, 2018 at 3:55 am #899444
    Mike

    Hey saucyhotdesign,
    Please include the url to one of the pages in question with admin login in the private content area so we can take a closer look.
    Lets start with the elements you are trying to hide on different screen sizes, please explain which element to hide on each screen size.

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Mike

    January 19, 2018 at 4:08 am #899450
    saucyhotdesign

    Thank you. On the home page I have tried editing the size of the captions on the slideshow for smaller screens and hiding them on the smallest screens. I also tried duplicating the slideshow and removing the captions altogether – making the one that had captions only appear on larger screens, and the one without captions to display on smaller screens only. Instead both displayed on all screen sizes so I removed the duplicate. I will also want to hide the two top black call to action buttons on the smaller screen sizes, among other things.

    January 19, 2018 at 1:08 pm #899654
    Mike

    Hi,
    I wanted to test your page on a clean install to see if the screen options will then work, but I couldn’t edit your functions.php because of a error. Please add this code to the end of your functions.php file via ftp:

    //set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
	return "debug";
}

    You can read about this code here: Enable Avia Layout Builder Debug
    Also please Try disabling your plugins. If that resolves the issue, reactivate each one individually until you find the cause.
    Since your slider is currently set to be hidden on mobile screens, this would be a good indicator to examine when disabling your plugins.

    Best regards,
    Mike

    January 22, 2018 at 1:07 am #900520
    saucyhotdesign

    Thank you. I have added that to the functions file and uploaded. I did first try disabling all plugins but unfortunately that did not fix the issue (I have reactivated).

    January 22, 2018 at 5:19 am #900586
    Victoria

    Hi saucyhotdesign,

    Can you please specify the page and the element that you’re having the issue with? I checked a few elements on the home page but did not see any screen options checked there.

    Best regards,
    Victoria

    January 22, 2018 at 5:29 am #900597
    saucyhotdesign

    Home page – have selected to hide the black buttons at the top on smaller screens, and to shrink or hide the captions on the home page slideshow.

    January 22, 2018 at 3:14 pm #900832
    Mike

    Hi,
    I tested your home page on a clean install and the buttons hide correctly, Please try disabling your plugins to see if this helps.

    Best regards,
    Mike

    January 22, 2018 at 9:41 pm #900983
    saucyhotdesign

    As I posted above, I have already tried deactivating all plugins and I did not get any change in the display.

    January 23, 2018 at 2:39 am #901092
    saucyhotdesign

    By setting ‘hidden’ on the container column of the buttons they are now getting hidden on smaller screens, but the captions (most important as they are otherwise covering the images) are not getting hidden or shrinking as they should…

    January 23, 2018 at 2:50 am #901093
    saucyhotdesign

    Update – At a medium screen size the caption smaller size settings are working, overriding the normal size, but at the smaller screen size the ‘hidden’ setting is not working and the captions show full size.

    January 23, 2018 at 3:08 am #901096
    saucyhotdesign

    The medium screen is picking up this style which is being adding in the footer of the page.

    @media only screen and (max-width: 989px) and (min-width: 768px)
    (index):390
    .responsive #top #wrap_all .av-medium-font-size-14 {
    font-size: 14px !important;
    }

    This is the style that has been added to hide captions but it is not being picked up cos the av-no-preview style isn’t on the page. Seems to be the root cause?

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive.av-no-preview #top #wrap_all .av-small-hide,
    .responsive.av-no-preview #top #wrap_all .av-small-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-small-font-size-title-hidden{display:none;}
    }

    January 23, 2018 at 3:41 am #901109
    saucyhotdesign

    I have fixed the issue by adding custom css without the ‘av-no-preview’ bit:
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive #top #wrap_all .av-small-hide,
    .responsive #top #wrap_all .av-small-font-size-hidden,
    .responsive #top #wrap_all .av-small-font-size-title-hidden{display:none;}
    }

    January 23, 2018 at 3:58 am #901114
    saucyhotdesign

    I thought I had solved my problem with some custom css in the childtheme. It works how I want it to when I resize my screen on laptop, hiding the slideshow captions when small screen, but when I view on my phone the buttons are hidden correctly but the captions are still there at large size…

    January 23, 2018 at 4:28 am #901125
    Mike

    Hi,
    Good to hear you have the button issue solved, if I understand correctly you would link to hide the slider captions on mobile, please try:

    @media only screen and (max-width: 426px) { 
.avia-caption.av-slideshow-caption {
display: none !important;}
}

    adjust the max-width number to suit.

    Best regards,
    Mike

    January 23, 2018 at 4:58 am #901139
    saucyhotdesign

    Thanks. Unfortunately they’re still showing on my mobile. As before they are now showing on my laptop when I shrink my screen size down to simulate mobile view, but they are showing on my mobile after refresh. Can you see if they show on your mobile? Link in private comments.

    January 23, 2018 at 5:19 am #901148
    Mike

    Hi,
    please see screenshots in Private Content area

    Best regards,
    Mike

    January 23, 2018 at 5:24 am #901154
    Mike

    Hi,
    If you are using Chrome on Windows, try hitting F12 to see the developers screen. please see screenshot in Private Content area

    Best regards,
    Mike

    January 23, 2018 at 9:53 am #901312
    saucyhotdesign

    So not just the ‘screen options’ things are not coming through on mobile phones (have checked on 3 different ones). Other customised css are not coming through on mobile phones (using childtheme css). Any ideas why? For example I added padding around the logo on smaller screens and it works in my laptop browser when I shrink the window, but still looks the same with no padding on mobiles. I have purged cache on both wordpress and the phones. Any ideas?

    January 23, 2018 at 11:43 am #901384
    saucyhotdesign

    This seems to have worked – adding to the functions.php child theme file to make the child theme style sheet ‘more important’ in the order.

    function enfold_child_theme_enqueue_styles() {
    $parent_style = ‘enfold-style’;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( $parent_style ),
    wp_get_theme()->get(‘Version’)
    );
    }
    add_action( ‘wp_enqueue_scripts’, ‘enfold_child_theme_enqueue_styles’ );

    https://codex.wordpress.org/Child_Themes

    January 23, 2018 at 12:12 pm #901411
    Mike

    Hi,
    Thanks for sharing this solution, is there anything else we can assist with?

    Best regards,
    Mike

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