Hello,
It seems that the here widget can not show my whole picture, the picture will be cut according to the resolution of my computer. I want to show whole size of my picture and let the text to be vertical-align to the picture, how can I implement this?
Thank you for your answer in advance.
Best regards,
Jerry
Hi Jerry,
The hero widget will display the full sized image by default but depending on settings and content length, the hero may not be able to show the full image in a responsive manner which will result in the browser clipping the sides of the image to ensure the image is the height of the container.
Do you have a public URL where we can take a look at the slider you’re working on?
Hi Alex,
This is the website which I am tring, http://geramlighting.com/. I want to show my full images(stretches to full width but not to be clipped), and make the text vertical-align, what should I do on the setting?
Best regards,
Jerry
Hi Jerry,
Okay, so the reason why your hero widget background is being omitted in this instance is due to a large amount of text present. I would recommend reducing the overall text amount – ideally, a headline would be perfect, something short and to the point.
You can vertically align the text inside of the hero widget by using CSS. Please open the hero widget and head over to the Widget Styles sidebar. Open the Attribute settings group and set the widget class to hero-vertically_center and then save. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.hero-vertically_center .sow-slider-image-wrapper { display: flex; flex-direction: column; justify-content: center; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thanks for your help. Now I know how to vertically align the text. But my image still be cropped…No method to solve this problem? I also saw many developers asked the same issue in this forum, but I could not find the answer.
Best regards,
Jerry
Hi Jerry,
There’s no reliable method of preventing that outside of using smaller/less text. This is a CSS “feature” (read: limitation – it cannot be disabled, only worked around) of backgrounds. Backgrounds must maintain the height of the container and to ensure this, the browser will clip the sides off of the image to ensure that.
Basically, you need to make the hero widgets contents smaller so the height of the hero is smaller so the browser doesn’t have to clip the sides of the background image off to ensure the image is the same height as the hero. I know its less than ideal but it’s unavoidable.
Hi Alex,
Thanks for your answer. But I found “SiteOrigin Slider” can show the whole image, even the image is resized. You can see this link http://geramlighting.com/?page_id=148. But I can not add my text above the image like hero. What is the difference between “Slider” widget and “Hero” widget? And Is it possible to show text on the slide widget(except the title)?
Best regards,
Jerry
Hi Jerry,
The SiteOrigin Slider uses HTML to display and the Hero widget uses CSS to display the background. It’s not possible to show text on top of the slider as a result of this difference.
Hi Alex,
Ok, understand. Thanks.
Best regards,
Jerry