Hi
I have a 1600 by 727 pixels photo I want to use as a hero image using the Site Origin Hero widget. I don’t want a large hero image so I set the height to 400 px (basically a 10:3 banner size) which crops the photo. So I resampled the image to these dimensions 770 by 350 hoping that the full image will display. I played with padding with no results and change the height to 0 or blank which made it even worse. Is there anything I can do to get the full image display or this setting will this not work with image and I should give up?
Thanks,
Hi Visit Pacifica
Do you have a public URL where we can take a look at what’s going on?
Thanks
Hi Andrew,
Thanks for getting back to me. Yes, here is the page with the hero image:
http://vp.wowie.co/stay-with-us/
The page is still under development
Attached is the actual image resampled to try to fit the size I desired.
Maybe this particular image just won't work with the widget and I will just have to use another. Is there a dimension that will work well with the widget so I know which photos I can use in the hero widget?
Thanks, Daisy
Hi Daisy
Thanks for the link. The forum doesn’t support email attachments at this time. You’re always welcome to send us files via Dropbox, Drive, WeTransfer etc. or imgur.com for images.
Your Hero is in a full width stretched row. This means that the width is always unknown and will depend on the screen size. To fill the Hero, the widget uses background image size “cover”. If you resize your browser window, at some point you’ll probably see the image size you were hoping for. To resolve the challenge, you could change the row layout to standard, which would give you a fixed width to work with. Alternatively, you could try to find an image that is a bit more “zoomed out”. That’ll help you fit more into the full width size.
Hey Andrew,
Thanks, it makes sense to a certain degree but I get that part of it depends on my settings and the image I selected. Another issue I have is with the hero widget leaves white/blank space between the hero image and menu bar which is blocking the search box from showing up on top. If you click on the same URL then click on the search icon on the menu bar you can see what I am talking about. I saw lots of questions about this issue but not sure what's relevant to my situation. It sounds like I need to add custom css code to the custom css editor. Can you give me the code? If you need me to make a new forum for this question I can do that too.
Thanks, Daisy
Hi Daisy
The theme is assigning a z-index of 10 to the search field container. You can raise that value with the following:
.search-slidedown { z-index: 201; }The above rule can be inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS or alternatively, CustomizeAdditional CSS.
The space below the menu is added by the theme. Our free support is usually limited to basic usage and troubleshooting. We’re able to assist with small Custom CSS customizations more freely within our premium support scope where we have the budget. You can remove the space using:
.page-id-225 .content-container { padding-top: 0; }Hey Andrew,
Thanks for getting back to me and the info. I really appreciate it. OK, I will keep that in mind re: small custom css support. I wasn't sure what is covered under basic usage and troubleshooting in the free support forum.
Thanks, Daisy
Hi Daisy, thanks for your understanding. If SiteOrigin questions arise in the future, please, let us know.
Cheers for now :)