Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3122600
responsive images not working
Closed

Comments

  • freeman1974 started the conversation
    September 11, 2022 at 8:39am

    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?

  •  2,488
    PenciDesign replied
    September 11, 2022 at 8:50am

    Hi,

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

    Regards,
    PenciDesign.


  • freeman1974 replied
    September 11, 2022 at 9:01am

    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.

  •  2,488
    PenciDesign replied
    September 11, 2022 at 9:18am

    Hi,

    Please send me your site URL.

    Regards,
    PenciDesign.


  •   freeman1974 replied privately
  •   freeman1974 replied privately
  •  2,488
    PenciDesign replied
    September 11, 2022 at 2:41pm

    Hi,

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

    Please check again.

    Regards,
    PenciDesign.


  •   freeman1974 replied privately
  •  2,488
    PenciDesign replied
    September 11, 2022 at 3:20pm

    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.


  •   freeman1974 replied privately
  • freeman1974 replied
    September 11, 2022 at 5:57pm

    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.

  •   freeman1974 replied privately
  •   freeman1974 replied privately
  •  2,488
    PenciDesign replied
    September 12, 2022 at 12:34am

    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 privately
  •  2,488
    PenciDesign replied
    September 12, 2022 at 8:27am

    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.



  •   freeman1974 replied privately
  •  2,488
    PenciDesign replied
    September 12, 2022 at 10:04am

    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.



  •   freeman1974 replied privately
  •  2,488
    PenciDesign replied
    September 12, 2022 at 10:33am

    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.