Home page Main Image Not Responsive in Mobile

  • Author
  • #2320

    [email protected]

    Hello, on my site the Home Page main image is not responsive on mobile devices, so most of the image gets cut off on smaller mobile phones. However, this is not happening on all my pages within the site. The main images on all the other pages are responsive and shrinking appropriately.

    Is there a different setting for the home page I can turn on? Is there a difference between the home page and pages within the site for main images? (I am using the free version.)


    Thank you.


    Andrew Misplon

    Hi 🙂

    The challenge is this line:

    <span style="display:block;clear:both;height: 0px;padding-top: 250px;"></span>

    Remove the above span tag. If you instead insert the image directly using a SiteOrigin Editor or Visual Editor widget (Black Studio TinyMCE), the image will re-size normally.

    If we’re planning on placing text over the image then it might be better to install the Widgets Bundle: https://wordpress.org/plugins/so-widgets-bundle and use the Hero widget.

    If you want to stick to the current background and place text over it then we’ll need to use custom row classes and media queries to carry it out in a responsive manner.

    Let me know if you want to keep the title “Home” on the home page. If so, I can help remove that spacing that shouldn’t be there above the page title. If you want to remove it just edit the page and set the Page Template in the right column to Full Width No Title.

    We’re at GMT+2 in Cape Town so most likely back with you tomorrow 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Scroll to top