CSS styling issues most likely caused by skew?

[jasonzimmermann]

Hello! 

I'm creating this page and using transform: skew; to create my angled sections. There are two issues I'm unsure how to fix.

1. The first is regarding the rich text modules in the grey section. The top seems to be aligning with the angeled top of the section but I would like to align them all horizontally in a straight line.
2. Under the call the action section at the bottom of the page there is some negativewhite space left by skewing that section and I'd like to have that sit flush to the footer. 

The skew property was something a little new to me but any help here is greatly appreciated. Thanks in advance! 

[tjoyce · Accepted solution]

@jasonzimmermann - You should remove the "slant-copy" class from each of your columns in the section that has multiple rows, and instead add it to the parent. 

As for your CTA footer, just add an inline style to the parent container of:

background: linear-gradient(to right, #001070, #204CFF);

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[jasonzimmermann]

Hm, so the slant-copy class is a class I created to add to the rich text modules. When I skew the background/parent it skews the text modules. The slant-copy class is basically skewing the modules opposite the parent so they appear normal. 

[tjoyce]

right, but you don't want to skew all 3 of them, you just want to skew it's parent container in the opposite direction

[jasonzimmermann]

Actually I just edited, this totally did the trick! Thanks. 

Let me mess with the footer now. 

[tjoyce]

awesome, yep, it's in my answer 😄

[jasonzimmermann]

Got it! I actually had to create an additonal parent element and added the background to that. Looking good, thanks for the help!