responsive images not working | PenciDesign Support

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

The problem is that you've uploaded an image that has a different size than our demo site, so some images not showing properly.

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

  @media only screen and (max-width: 479px) {
      .featured-style-31 .penci-image-holder,
      .featured-style-32 .penci-image-holder {
          height: 160px !important;
      }
  }

Change 160px to the size of the image you want to show.

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please select the largest image size for mobile (minimum width 700px) then change the CSS like this:

@media only screen and (max-width: 767px) {
    .featuredsl-customizer .item.pencislider-item .penci-lazy {
        background-size: 100% 100%;
    }
}

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please delete the previous code I've sent and replace it with this CSS code:

@media only screen and (max-width: 767px) {
    .featuredsl-customizer .item.pencislider-item .penci-lazy {
        background-size: contain;
        -moz-background-size: contain;
        -webkit-background-size: contain;
    }
}

Regards,
PenciDesign.

freeman1974 replied

4 years ago

Customer Reply

actually thats not good at all. its also has reduced the full size image when viewed on desktop and also added a grey area to that too.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.featuredsl-customizer .item.pencislider-item .penci-lazy {
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
}

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I can't log in because your site showing a "This site is currently not available." notice.

Please check again.

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please send me your site URL.

Regards,
PenciDesign.

freeman1974 replied

4 years ago

Customer Reply

Thanks for the reply, but ive just gone into that and changed it to several of the size options and nothing effects the size of the image. On mobile the image just stays the same size and gets cropped.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Featured Slider → General → Custom Image Size on Mobile: change the mobile image size here.

Regards,
PenciDesign.

freeman1974 started the conversation

4 years ago

Conversation Start

on your fitness blog demo, on 'home with slider 1' the image is responsive. it reduces in size when you reduce the screen size.

i cant get that to work. The image i put in there doesnt reduce when you shrink the page?