Image alignment at the top

[jhayles]

Hi. I want my main image at the top to go all the way across the page vertically (I think I’ve accomplished this already) and I like the height that the current column has it at. However, I have two issues:

1. The image has automatically zoomed-in too far into the picture. I want it to zoom out some, so more of the picture can be seen. How do I control that setting?

2. The main image is not showing up at the top of the screen when I preview it.

Here’s the link to the Layout I’m working on: https://experiencethesprings.com/category/moving/

Can you help me?

[prakash_s]

Hello, @jhayles,

Thanks for writing to us.

I checked your given page URL, I can’t find any image at the given page URL on top of the page. There is no header as well. I can only see the post’s gravatar image. Can you please set up the image again in case if you have removed it or please share any marking screenshots?

Thanks

[jhayles]

I know the image isn’t showing up on the page, that’s why I mentioned it as #2 above. Here’s the screenshot…

[prakash_s]

Hello, @jhayles,

I checked your site it seems that you are using the Parallax settings. I would suggest you decrease the Parallax size value to get rid of zoom. Please have a look at the given screenshot below.

I also noticed that there is only one background image. Please have a look at the given screenshot below.

Thanks

[jhayles]

I’ve tried reducing the parallax settings but it’s still zoomed in too far.

I don’t know what you mean by there is only one background images…should there be two of them?

[jhayles]

And why isn’t the layout inside the builder matching the live version?

l

[friech]

Hi Josh,

@jhayles

The main image is not showing up at the top of the screen when I preview it.

The reason that is happening because on the Builder the columns have min-height, that min-height is important on the builder because without that all columns will have 0 height by default and you cant drag element inside it.

Now on the front end, there is no default min-height into columns. Columns height will depends on what element inside it. And since your hero column has no element inside it, its height is 0 that is why we can’t see that hero background-image.

To resolve both of your issues, I suggest you add the image as an Image element inside that column, and not as a row background. You might need to crop the top of that image a bit though.

Let us know how it goes,
Cheers!

[jhayles]

The image is showing up now, but it’s way too big. It’s using the full size instead of making it fit inside a rectangular box like I want.

So, I have two issues:

1. How do I use the PRO settings to generate the image size, and amount of zoom-in level I want so that my desired look is achieved?

2. Why is the blog layout different inside the builder vs. the live version?

Look at this screenshot: (I cut off the image on purpose to illustrate the size and style I’m looking for)

Do you see how the shape of the image is long and rectangular, and the blog is underneath it?

That’s the look I want. I don’t want a smaller image size because I want to make sure it’s large enough to go across big screens.

There has to be a way to program the PRO system to zoom in to the right area of the image, and to make it the size I want without sacrificing the bigger size of the image.

Does that make sense?

[jhayles]

Also, inside the builder I have a 3 column post that I want the three most recent posts to show up. Then, below that I have a 2 column post, where the next two blog posts should show up. However, the 2 column posts are not showing up inside the builder. Why is this happening?

See screenshot of my outline…

[christian]

Hey @jhayles,

We’re sorry for the wrong suggestion to use an Image element. Your first setup of setting the image as a background is already the best setup if you wish to control what to show. The only trick there is to:

1. Add a Gap element to the empty Column so that it will collapse the space when the column or a draggable area is empty.
2. Set the Section’s or any background container’s top and/or bottom padding to a % value.

Below is a video demo of what I mean.

2021 07 07 22h59 51

---

Regarding the post issue, the column is empty and the screenshot of the section does not tell us the exact content so we need to log in to your site. Before that, it would be best to open this up in another thread to avoid confusing us. In the other thread, please provide the following info in a Secure Note so we could check the exact setup.

• WordPress Login URL
• Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[jhayles]

I created a new thread and posted my secure note…

[marc_a]

Hi @jhayles,

Thanks and just wait for our answer to the another ticket.