Search code examples
phpwordpresswordpress-theming

CSS not loading on mobile devices but working fine on desktop


I'm in the middle of creating a WordPress theme, which I haven't done in a while, and I ran into a problem regarding mobile CSS.

I embed my CSS file in the functions.php file:

  function enqueue_my_custom_styles() {
      wp_enqueue_style( 'stylesheet', '/assets/main.css' );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles');

This seems to be working absolutely fine and when I check if the file is linked in a browser, it is showing. However, when I look on my mobile, I can only see basic HTML markup with working Bootstrap 5.0, which is embeded in the header.php file ( I have already tried embedding the CSS into the header.php file, same results)

Is there a specific function that I overlooked or is the problem somewhere else? Thank you.


Solution

  • /* Some time css not working on specific mobile device because third party library impact on your current page or any wordpress plugin install on your website then so you can using media queries and set your target apply on specific device.  */
    
    You can used different css for chrome , firefox , safari brower etc.
    
    For more details visit below links
    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
    
    1. Css functionality is wp default option – so this is not theme related issue, if you are using any caching plugins or any other caching solutions clear them before checking on mobile.
    2. Make sure to clean the mobile cache before checking (every time you make CSS changes)