image not sizing properly in tablet

[Nate]

Nate

May 18, 2016 at 8:42 pm

I’m currently using the site origin page builder to supply header images to two pages, the members and resources section of this website:
*Login to see link

In the page post, I have two images uploaded, one for desktop with this in the attributes:

.mobile-only {
display:none !important;}

.desktop-only {
display:block !important;}

And one for the mobile with this in the attributes:

.mobile-only {
display:block !important;}

.desktop-only {
display:none !important;}

I mostly decided to do this because I wanted to keep the images for the pages on mobile consistent with the mobile header, and same for the desktop.

I’m happy with how this site looks on mobile (iphone in this case) and how it looks on desktop. However, since the site is set to be responsive, the image reverts to the mobile version on tablet. However, the slider looks too small, and the header images on those pages look huge by comparison. Even if I could get the slider and header images to be the same size, I feel that neither fit the tablet.

My question:
Would using the desktop header images (which are each 940 by 200 px) on tablet look okay, and what css would I use to make sure that the image shows up in tablet as well as desktop but not mobile?

Or

Do I need to upload a third, separate image that would better fit the resolution of the tablet in portrait mode and, if that’s the case, how would I apply css to make sure that it only showed in tablet, not mobile or desktop modes?