CSS styling issues most likely caused by skew?

SOLVE
jasonzimmermann
Participant

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! 

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@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. 

Monosnap 2018-10-25 10-28-06.png

 

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.

View solution in original post

6 Replies 6
tjoyce
Solution
Recognized Expert | Platinum Partner

@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. 

Monosnap 2018-10-25 10-28-06.png

 

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.

View solution in original post

jasonzimmermann
Participant

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. 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

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

0 Upvotes
jasonzimmermann
Participant

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

 

Let me mess with the footer now. 

 

tjoyce
Recognized Expert | Platinum Partner

awesome, yep, it's in my answer 😄

0 Upvotes
jasonzimmermann
Participant

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