I created a hero: style-1 on my website called Main-Roberto-Hero-1. I put an image in the background image. When I look at it on a desktop it looks great. When I look at it on a tablet or smartphone the image is shifted to the right. I fiddled with it until it looked okay on the phone and tablet, now it's chopped off on the top and bottom when I view it on a desktop. What am I doing wrong? What do I need to do to the image, or the hero setting, for this to work on any form factor?


Here's the view I'm trying to describe.

I turned off full screen for the image and it shown on the page, but the image is cut off on the bottom. What do I need to do to this image so that it can be displayed in any form factor. Right now you can't see the entire image in portrait mode on a smart-phone.

    hbic
    Hi,

    You can try with this custom CSS code:

    .acm-hero.position-center {
    background-size: auto 100% !important;
    background-position: center;
}

    put into the file: root/templates/uber (your default template)/css/custom.css (Create this file if it doesn't exist)

    Regards

      Write a Reply...
      You need to Login to view replies.