Display problems! Help! :O

Beaver Builder
1

I was trying to streamline my entire design process, and so I thought, why not just create a template for my site in illustrator first since a lot of the graphics are vectors anyway and I could share a preview with the client before the site goes live, and then everything can be set to size and scale, exported, uploaded, and placed in place. Apparently it’s not that easy.

I think the problem that I’m having is that as a zoom out the rows seem to “jump” up and down the page. I can’t seem to find the right combination of settings…
I feel like I’ve tried every possible combination of settings for all my images, rows, and columns, but to no avail.

Anyway, I can’t seem to get past the banner. What I’d like to do is have the red white and blue background stay stationary, while the logo stays anchored to the left side, within that banner, and the trust icons would stay anchored to the top right. I want the images to stay relative to the banner so that on wider monitors the logo and the trust icons would simply slide off to the sides more, but stay within the banner.
I’d like to have more content that stays anchored to the center of the screen, like the title, nav bar, contact us button, and text blurb, but I haven’t really gotten that far yet, because I can’t seem to get the basic banner background image to scale right in relation to the logo and trust icons…

2

Here’s an image of what I’d like the page to look like:
Site Template

3

annotation

4

Just to keep you up to date, what I’m trying now is separating the white part of the banner from the background so that it becomes a page element too, and then maybe I’ll only have to keep things relative to that and let the row background do it’s thing?
Fingers crossed.

5

Hey Mohammad,

Wow, that looks complicated. We’ll help where we can here, but it’s definitely looking like you’ll need quite a bit of custom CSS. Hard to tell without seeing the live site and doing some inspecting. Anyway, let us know how it goes!

Best,
Billy

6

Yeah, I’m not really a css guy; I’m thinking I might have to use edge animate and WP OAM Renderer in order to achieve these kinds of results.
The only thing I don’t like about OAM Renderer is that all my documents with transparent backgrounds have a grey iframe-like bounding box around them. ]: (