CSS Help!

  • Resolved staybull

    (@staybull)


    8 years ago

    I do not want a certain image to display for mobile visitors. I am using the custom CSS as follows:

    @media screen and (max-width: 480px)

    {

    img[src*=”joshpic1New-300×416.jpg”] {
    display: none;
    }

    the website url is : http://www.floridanonownersfr44insurance.com/

    The same custom CSS is working just fine on another site of mine: http://www.floridanonownerssr22insurance.com/

    but I cant seem to get it to work on any of my other sites.

    I am confused as to why it works just fine on one site but not the others. I am new to CSS and any help would greatly appreciated. Thank you!

    Theme:Responsive Pro

Viewing 2 replies - 1 through 2 (of 2 total)
  • paulwpxp

    (@paulwp)

    8 years ago

    Just change your selector (with CSS code wrapped in media query) from this

    img[src*="joshpic1New-300x416.jpg"]

    to this

    img[src*="joshpic1New"]

    The reason your code works for one site but not the other is that new version of WP has this responsive image thing going on and it reads available image sizes from image sizes set by theme/custom function/plugin, and one of your site happens to have more image sizes than the other (view source of that page and compare 2 sites).

    Changing the selector as shown above should fix the problem (if your code really did work for one site but not the other) because it target all image that has “joshpic1New” in file name so it hits all image sizes produced by WP.

    Thread Starter staybull

    (@staybull)

    8 years ago

    That worked. Thank you sooooo much for the helping me!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Help!’ is closed to new replies.

Tags