Mobile Featured Image

• 

  carlnoblevet · Member · Feb 26, 2018 at 10:07 pm

  • Copy link
  • Add topic to favorites

  My site: http://noblevetcom.wordpress.com

  I added text to the image because I couldnt find a way to add it directly through wordpress.

  When viewed on mobile, it does not resize correctly. Is there a way to use CSS to show a different image only on mobile devices?

  Thank you in advance for any help.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 27, 2018 at 2:02 am

  • Copy link

  We can, but the cutting off of the left/right edges of the text actually starts happening at just under 1000px in screen/window width, so it needs to be adjusted for more than just mobile devices.

  This is a bit of a tricky thing to get to work right, so I’ll need a bit of time to work on this.

• 

  carlnoblevet · Member · Feb 27, 2018 at 3:22 am

  • Copy link

  I have this:

  @media only screen and (max-width: 600px) {
  .home .featured-image {
  background-image: url(https://noblevetcom.blog/wp-content/uploads/2018/02/mobile-1.png) !important;
  background-size: 100%;
  }
  }

  but the issue is that featured-image is used for all of the 4 images, so on mobile all four are now changed to the new image. I don’t know another way to differentiate between the images.

  Thank you so much in advance for your help :)

• 

  mable04 · Member · Feb 27, 2018 at 7:53 am

  • Copy link

  Featured image in my post not responding

• 

  thesacredpath · Member · Feb 27, 2018 at 6:03 pm

  • Copy link

  Hi @mable04, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

• 

  thesacredpath · Member · Feb 27, 2018 at 6:13 pm

  • Copy link

  Hi @carlnoblevet, your site is going completely blank for me right now on mobile. Did you add any additional CSS or perhaps add a new plugin? I’m seeing an error/warning about Mobile Smart. Can you deactivate that plugin and let’s see if your site on mobile comes back.