I have image with the dimension 2560 x 1707 pxl and I want to divide the image over 2 hero widgets, how should I set the height ratios on the 2 hero widgets so the divided image connects perfectly.
For reference, see top of page; https://arreli.se/
dividing an image over two following Hero Widgets
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
That is fixed problem, problem now is if the screen size change, like tab screen, image gets scrambled
Hi, thanks for reaching out.
Using the row background setting would be the easiest way to proceed. Edit the row in question, edit the Design section on the right and add your background image there.
hello, it’s fixed. the problem i have now is the mobile layout. If you look at the mobile layout of the site, you can see that the 2 hero widgets are partly hidden not fully showing. Which settings should I edit to fix this without affecting the non-mobile layout.
Thanks for your feedback.
I recommend trying to use the row background image instead. The current method has an issue on larger displays. https://imgur.com/a/mmvoPYY
I’m not quite following why the layout is compressed at lower resolutions. I spent some time now digging around and couldn’t locate the cause. If that issue persists you could try temporarily switching to the Twenty Nineteen theme to see if the issue of Page Builder content being compressed into a narrow column on mobile is somehow related to the theme’s styling. Isolating the problem would be a good first step to resolving it.
hello, the imgur link you sent doesnt show anything.
i dont get an image displaying with row background image
and why do the rest of the content on the start page disappear
Sorry, I’m not sure what happened with the Imgur upload.
Here is an experiment https://demo.siteorigin.com/corp/background-test/.
Perhaps try creating a test page and use this layout. You can find it here.
Unzip the file.
Create your test page. In Page Builder click LayoutsImport/ExportImport Layout. Import the JSON file.
I used a Layout Builder to get a multi-row layout into one row.
Edit the first row that contains the Layout Builder and check the Attributes section, change the URL of the background image to match your image URL.
background-image: url(https://demo.siteorigin.com/corp/files/2020/09/logo.jpg)Change only
https://demo.siteorigin.com/corp/files/2020/09/logo.jpgThe row background setting doesn’t offer background-position which is why I used the Attributes section.
and why do the rest of the content on the start page disappear
Do you mean on mobile? If so, I think I’ve found the cause. If you remove the following from Custom CSS, the issue on mobile resolves:
.home h1.entry-title { display: none; visibility: hidden; }