Docs

[davidgaiz]

Hi there,

I need some help in adjusting the size of the first image on this page: capropertypics.com/demo. I’ve attached a screen shot of what I’m trying to achieve. Can you help me setup the section for the image so the page always loads like my example? And then provide some insight on what I should crop future images to resolution wise to have them fit in that area?

Thanks! Login info provided in the next message.

[davidgaiz]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.home .tp-bgimg.defaultimg {
    background-position: calc(100%) calc(100% + 150px);
}

Hope that helps.

[davidgaiz]

Thanks I’ll give it a shot and see how it works out. Appreciate the help!

[Darshana]

Let us know how it goes.

Thanks!

[davidgaiz]

Is the code you provided going to affect things globally on the site, or only this specific area that I mentioned in the original post?

[Darshana]

Hi there,

It is only targeting your homepage’s background image.

Thanks!

[davidgaiz]

Ah ok that’s what I wanted to check on. The image in question isn’t on the homepage, it’s on a different page. capropertypics.com/demo

[Lely]

Hi There,

Please use this instead:

.page-id-92 div#x-section-1 {
    background-position: calc(100%) calc(100% - 350px);
}

Adjust 350px accordingly.

[davidgaiz]

Thanks Lely, I tried that out, unfortunately it’s not really solving the problem.

I’m trying to have a defined area to drop an image into that will allow the address below it to show just above the fold of the page. I’m going to be using this page as a template to create many customer pages where I’m swapping out the image in this specific area that I’m trying to target.

So if I add in that global CSS adjustment that targets this specific page ID, anytime I duplicate this page for a customer then edit it I’d have to add in more code to the global css to target the new page? Is there anyway to make an adjustment to this section within cornerstone so it properly sizes the image area?

Thanks!

[Friech]

Hi There,

Remove the huge padding you applied on that section, and add this on the section’s STYLE field.

height: calc(100vh - 330px);

Note that the 330px here is the sum of the header and section height.

Thanks,

[davidgaiz]

@Friech – genius, thank you. Problem solved!

@Friech – Since you were so awesome in giving me the quick fix for this, mind taking a look at another issue I’m trying to solve? I posted about it here: https://community.theme.co/forums/topic/headernavigationtop-bar-issues-sizing-formatting/ I got close to getting it solved with some help but not fully there yet.

Thanks!

[Nico]

Hi There,

Happy to hear that it is solved already.
I will forward the thread to friech however we usually answer question from oldest to newest.

Thank you for understanding.

[Author]

Posts