Port – Featured Content & Testimonial Background images not size responsive

  • Author
    Posts
  • #141235

    Hi,
    The background images on my homepage look fine is desktop mode but aren’t changing to a suitable size for mobile view. How do I rectify this?

    The blog I need help with is portraitsbysarah.co.uk.

    #141480

    themetrust
    Theme Author

    Hi,

    The background images are designed to fill the full size of the section. Since you have so much content in those sections, when on mobile, the sections get very tall. The image scales proportionally to fill the height of the section. This means the width of the image also has to scale, otherwise the image would look squished. Hope that makes sense.

    You have a couple of options. hide some of the content on mobile, or hide the background images on mobile.

    Depending on which you would prefer, I can provide some custom CSS.

    #141495

    Hi,

    Could I have CSS to hide some of the content please. Not sure if it’s possible to have just 1 testimonial? If not, none is preferable. Also I had to put a border around the home content background image to make it display properly on desktop but now it doesn’t display properly on mobile. What’s the best size image to show fully on both? Thank you.

    #141501

    I also need my featured content background to be responsive as the full image doesn’t show properly on all devices. I chose this theme because it stated it was highly responsive on all devices. I’ve spent a lot of time setting it all up and it isn’t really very responsive at all! Please advise the best solutions. Thank you.

    #141588

    themetrust
    Theme Author

    You have to keep in mind that full size background images will always have portions of the image that are cropped. It’s impossible to show the full image on every size of device. Another thing to keep in mind is that background images should be chosen accordingly to act as backgrounds and not the focal point.

    Recommend image size for the background images is: 1700px x 1100px

    This custom CSS will hide the testimonials on mobile:

    
    @media screen and (max-width: 480px) {
    #testimonials{
    display: none;
    }
    

The topic ‘Port – Featured Content & Testimonial Background images not size responsive’ is closed to new replies.