Different responsive sizes for compact layout

[OgraL]

Hi, I want to know how can I edit the size in various responsive options (max-width) for the Compact Layout. For example… if I want the search box to open in 40% in desktop, 60% in tablet and 80% in mobile. I wasn’t able to edit the style via css. I don’t know if I need a specific selector. I’m using it via shortcode in Elementor. Sorry it this has been asked before, but I didn’t find any info, or I didn’t use the correct search terms.

[Ernest Marcinko]

Hi!

Well, for the compact layout max-width or other CSS changes won’t work, as the width is passed as a script argument, so those would have no effect. I think I will add mobile and tabled width options for this view as well in the upcoming release.

Until then, the only way is server side detection, and changing the arguments afterwards, using a custom code. Try adding this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!

add_filter('asp_shortcode_search_options', 'asp_compact_width_change', 10, 1);
function asp_compact_width_change($args) {
    $mobile_width = '280px';
    $tablet_width = '400px';

    // --- DO NOT CHANGE ANYTHING BELOW ----
    $mdetectObj = new WD_MobileDetect();
    if ( $mdetectObj->isTablet() ) {
        $args['box_compact_width'] = $tablet_width;
    } else if ( $mdetectObj->isMobile() ) {
        $args['box_compact_width'] = $mobile_width;
    }

    return $args;
}

Just change the $mobile_width and $tablet_width variables as you need them. Please note, that because this is a server side user-agent detection, resizing your browser won’t trigger the changes. It only works if you visit the page from actual devices, or change your browser user agent string via the developer tools, and reloading the page after.

I hope this helps!

[OgraL]

You cannot access this content.

[Ernest Marcinko]

Hi!

No need for another ticket of course, try this custom CSS, it should do the trick:

.asp_s {
    z-index: 9999999 !important;
}

[Author]

Posts