Docs

[Kamila L]

Hello,

I am trying to recreate something like this:

https://blog.kissmetrics.com/wp-content/uploads/2014/06/lead-pages-screen-shot.jpg

On my site I want the container to show up on top of the background image – but for some reason my background image in showing up under my container. How can I fix this?

Link to my page – http://livewithintent.co/create-experiences/

Appreciate your help!
-K

[Rupok]

Hi there,

Thanks for writing in! Let’s use the image as section background.

Cheers!

[Kamila L]

Hi,

I want the section background to be black and centered and the background image to be behind it.

Close to this site – https://blog.kissmetrics.com/wp-content/uploads/2014/06/lead-pages-screen-shot.jpg

Can you please advise as to how to get the full background image to showup on my site –

http://livewithintent.co/create-experiences/

Thanks,
-K

[Jade]

Hi Kamilla,

Please set the image as the background image for the content band.

[Kamila L]

Hi Jade,

Thanks for the above. So now the background image is showing however there is white space in the bottom how do I get rid of it?

Also I would like the Headline/Text/EmailForm to be encompassed in a small box with black background like the one in this picture – https://blog.kissmetrics.com/wp-content/uploads/2014/06/lead-pages-screen-shot.jpg.

How can I accomplish that? Appreciate your help!

Thanks,
-K

[Rue Nel]

Hello There,

Thanks for the updates!

1] The white space is the bottom margin of the content band. Please make sure that there are no margins in your content band. In the Content Band settings particularly the style, you can simply add margin: 0 auto !important.

2] For the small black box, you need to add some margin in the container settings so that you will have some space both top and bottom. And please remove the height of 300 pixels you have set because it will not help.

Hope this helps.

[Kamila L]

Hi Rue,

Thanks for the suggestions.

1. So I updated with margin: 0 auto !important. However I am still seeing some white space on the bottom. Can you please provide an alternate solution.

2. I played around with the margins but I couldnt get it to be this size – https://blog.kissmetrics.com/wp-content/uploads/2014/06/lead-pages-screen-shot.jpg. Could you please advise on the margin size?

I really appreciate any help you can provide!

Thanks,
-K

[Rue Nel]

Hello There,

1] I think I know what you mean by the white spaces. Do you want to have a fullscreen background image without seeing the white space at the bottom? If that the case, please edit your content band and insert an inline css min-height: 100vh;

2] Do you want something like this, http://prntscr.com/d0qrcq? If this is the case, please use this inline css in your container margin-top:100px; margin-right: 100px; background-color: black; max-width: 420px;

Hope this helps. Please let us know it goes.

[Kamila L]

Hi Rue,

Thanks a lot you guys are the best!

So everything looks perfect on desktop mode. However, on mobile the black box does not resize. How would I accomplish that?

Thanks,
K

[Christian]

Hey Kamila,

I checked and the black box resizes. Please try clearing your browser cache and check again.

Thanks.

[Kamila L]

Hi Christian,

Thanks it was a cache issue!

If I wanted to center the black box just on mobile version of the site how would I do that?

Thanks again, appreciate all your help.
-K

[Jade]

Hi Kamilia,

Please add this code in the customizer:

.page-id-481 #x-content-band-1 .x-container.max {
    margin: 0 auto !important;
}

Hope this helps.

[Kamila L]

Hi Jade,

Thanks for the code.

One last question!

If I wanted to add padding around the text on the page how would I accomplish that?

Specifically, I want some space on the left and right of these lines:

DO YOU WANT TO GET OUT OF THIS RUT —.> (WAKE-UP. WORK – STARE AT A COMPUTER SCREEN FOR 8+ HOURS. EAT. WATCH TV. SLEEP. REPEAT.)?

DOWNLOAD THIS ONE PAGE ROAD-MAP FILLED WITH A UNIQUE EXPERIENCE TO TRY EVERY-WEEK FOR A YEAR AND START CREATING EXTRAORDINARY MEMORIES THAT LAST A LIFETIME.

Thanks,
-K

[Christopher]

Hi there,

I would like to check your site, but it’s under construction mode. Please provide us with login credentials.

Thanks.

[Kamila L]

This reply has been marked as private.

[Author]

Posts