Full screen CTA in post

Support
#1

Hi,

In a post of a new website I’d like to add a CTA that is full screen. However, making the post in Pro I can add the section that contains the CTA (in this case a ConvertPlus banner) but it won’t go full screen. It just adapts to the set width of the post. Is there a way to do this?

The post: http://www.wpdept.nl/zzpdoorbraak/2017/09/05/stuur-maar-eens-een-offerte/

Thanks.

#2

Hi There,

On Cornerstone | CSS of this specific post you can add:

.x-container.max,.x-container.width {
    width: 100%;
    max-width: 100%;
    margin: auto;
}

You will need to adjust the padding of your sections in order that the content does not stretch to the border when you don’t want it.

Hope it helps!

#3

Ah, okay. Will that not mess with responsiveness when padding is applied?

#4

Hi There,

Whenever adding padding to sections I prefer to add padding using % not px and the results are usually pretty great.

Hope it helps

#5

Hi,

Tried it but the padding can only be used for the text (I’m editing the posts in Pro) and not for the featured image or title and such.

#6

Hi There,

Please add the code and provide the post URL and we will provide a css to fix the layout.

Thanks

#7

Okay, done. Link is the same as in the topic starter.

#8

Hi There,

Please add the following code to Theme options CSS

.single-post .entry-thumb img {
width: 100%; }

.single-post .entry-header,.single-post .x-comments-area  {
    padding-left: 10%;
    padding-right: 10%;
}

On your content you can add 10% padding on each section you wish as well.

Hope it helps!

#9

Thanks, that seems to work. However, now the blog page itself is also full width from left to right. How can I change that?

#10

Hi again,

You can make use of the following code to fix this:

.blog .x-main.full {
    padding: 0 10%;
}

Hope this helps!

#11

Damn, almost found it myself! Thanks :wink:

#12

You’re welcome.