Home>Support>Hero Image Does Not Scale

Hero Image Does Not Scale

By robwfounder, 9 years ago. Last reply by robwfounder, 9 years ago.

Using your Hero Widget and two issues:

1) the background image is zoomed in on desktop and is cropping the image (which is larger than the desktop viewport)…it should be scaling the image down to fit the browser

2) On mobile the image is not scaling at all

I understand the concepts of images stretching and shrinking to fit the browser but your widget isn’t doing that.

Can you please supply answers to this, including necessary CSS that I need to include (I already know how to create a class so for our purposes here use the class ID of “banana”

Thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 14 days ago robwfounder

    Wanted to add some more info:

    Here is a screencast: http://screencast.com/t/4q43XsApkSvl

    In it you will see that I have a 1920by600 image that on desktop is being zoomed in somewhat and then stretched..you can see what the full image looks like when i flip to the media library in the screencast.

    I have 200px of padding specified within the HERO Widget frame to get the text centered

    When the browser is shrunk to mobile only the very center of the background is seen and no scaling down is occurring.

    The only CSS I have realted to the HEro Widget is for styling the text in it as seen here:

    /*START Desktop Site Origin HERO Widget for Post Title*/
.banana .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper  h3 {
  font: normal bold 18px "Georgia", Helvetica, Arial, sans-serif;
  color: #fff;
  border-bottom: 0px solid #e6e6e6; }

.banana .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper  h2 {
  font-family: 'Cabin Sketch', serif;
  font-size:70px;
  line-height:60px;
  color: #fff;
  border-bottom: 0px solid #e6e6e6; }
/*END Desktop Site Origin HERO Widget for Post Title*/
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More