CSS media queries don’t work on mobile

I’m not entirely sure what you mean. It appears that the element you’ve selected (.content-single-job_listing-hero-actions) is sticky on both desktop screens and mobile devices, at least on the phones I’ve tried, so it seems my plugin is doing its job.

Can you tell me a bit more about what’s not working exactly?

Thanks for your response.

Basically, I use this code:

@media (max-width: 480px) {
    .element-is-sticky .fav-button.button.button-secondary {
    font-size: 0;
    border: 1px solid #868686;
    }
    .element-is-sticky .bookmark-notice.button.button-secondary {
    width: 74px;
    }
    .element-is-sticky {
    padding-top: 5px !important;
    height: 65px;
    }
}

to achieve this: image of browser resizing

but instead I get this on mobile: mobile

As I mentioned, the above snippet works fine when resizing the browser window. Even simulating a smartphone behaviour via the browser inspector displays what I want to achieve. Oddly, it doesn’t work on two smartphones I tried as I get this instead.

Any help would be appreciated ??

• This reply was modified 6 years, 1 month ago by andypp.

This is not directly an issue with my plugin, but some mistakes in your CSS code. I believe this is the code you should try instead:

@media (max-width: 480px) {
    .element-is-sticky .fav-button.button-secondarys {
    	font-size: 0;
	border: 1px solid #868686;
	width: 74px;
    }
    .element-is-sticky {
	padding-top: 5px !important;
	height: 65px;
    }
}

That was it, thank you for taking the time to help.
After testing 5 or 6 plugins, I can say that yours is the only useful choice. I left a well deserved 5 star review.