Slider image resize for mobile

Hi there,

Just wondering if there’s a way to make the main image I have for my site ( resize down beyond where it does right now? I’d like the image to show all three people on it even on small mobile devices.

Thanks in advance


currently, its the best header image size in mobile device to have the best displays of the site. I mean, its about the header section and the contents.

if you wan to display all of three people in the header image, you have to reduce the image size (using css code) but you have to remove all of the content of the header. something like this

what do you think?

Hi Awan,

Really? When I resize the window on my desktop the image seems to shrink for a bit then stop shrinking. I was thinking there must be a way to get it to carry on shrinking. That would work as a last resort I guess but I would be loathe to lose the intro text.

Can you show me how you did what you did?


Wait, maybe you can keep the intro text displayed. Please apply this css code using custom css plugin and let see the result:

@media screen and (max-width: 320px){
 .slides-container .slide-item {
    background-size: contain;
  height: 213px !important;

Cool, I’ve noticed that if I remove the overflow:hidden* from the inline CSS that is being used for the image container for the slider the image shrinks with ease. I was just wondering where that inline CSS is being created? I have W3 Total Cache on here so is it being minified and turned into inline things? Sorry for all noob questions

*<div class=“slide-item” style=“display: block; left: 1227px; position: absolute; overflow: hidden; height: 100%; width: 1227px; top: 0px; z-index: 2; opacity: 1; background-image: url(; background-position: 50% 10px;”></div>