How to select an element for mobile view only?

Hi @michalrama,

Thanks for reaching us,

Could you please let me know the section of your site, you are trying to customize especially for the mobile view? It would be better if you can share the screenshot so that I can inspect it and provide an appropriate solution.

Kindly provide the details and I will be back.

Regards

Hello @barsha04 ,

This is a button “CENíK” right on the home page that is below the image, but I need it to be on the image.

I assigned an ID to it and achieved it with this code.

jQuery(document).ready(function() {
    if (top.location.pathname === "/") {
        $height = jQuery("#tlacitko").parent().height() * (-0.4) + "px";
	$width = jQuery("#tlacitko").parent().width() * (0.666) + "px";
	jQuery("#cenik").parent().parent().parent().css({"position": "relative", "left": $width, "top": $height});

	jQuery(window).resize(function() {
	    $height = jQuery("#tlacitko").parent().height() * (-0.4) + "px";
	    $width = jQuery("#tlacitko").parent().width() * (0.666) + "px";
	    jQuery("#cenik").parent().parent().parent().css({"position": "relative", "left": $width, "top": $height});
        });
    };
});

I don’t know if this is optimal, but it works. However, after switching to mobile view, the position of the button starts to change. Additionally, I need the button to be smaller in the mobile view.

Thanks

Hi @michalrama,

Please try adding this CSS inside WordPress Dashboard > Appearances > Customize> Additional CSS and check it once?

@media screen and (max-width: 480px){
.elementor-button.elementor-size-lg{
padding: 10px;
}
}

Let me know if this helps you or not and I will be back.

Regards

Hello @barsha04

Yes, that’s exactly what I wanted.

Thank you very much

Hi @michalrama,

Glad to hear that the issue has been fixed. Let me know of any queries or confusion and I will be back.

Regards