Looking for some assistance achieving positioning/padding as seen in the layout design inside this post:

http://staging.present-design.flywheelsites.com/wp-content/uploads/2016/06/Screen-Shot-2016-06-23-at-4.16.31-PM.png

*to view you may need to log in:
username- flywheel
pswd – waggish-hand

1.I am having difficulty shrinking the transparent background around the image, how do I change the dimensions? I think I need to adjust the 2/3 + 1/3 ratio of the columns, but i’m not able to target it correctly…do I set it in pixels?

2.I would like this element block once completed, to overhang between the two content blocks (the wave image and the block that will sit below, see layout design displayed in the above link). How can I achieve this look? I thought adding a negative padding to the top should work, but it doesn’t appear to.

Thanks!

So the JPG is the design you are after?

Ok first of is the wave image going full width (row will be full width and fluid)?
That darker blue are should go over the white?? Looks a bit odd, but I would do it with a 1/3 or 1/4 column, then place an inner Row inside it with a background and then you can do a custom class for that row that will have a CSS for example something like this:

.overlapping_box {
position: relative;
top: 100px;
}

This should make it overlap the bottom Row…

(see screenshot here: http://staging.present-design.flywheelsites.com/wp-admin/post.php?post=4700&action=edit )

Login Credentials:
username: flywheel
pswd: waggish-hand

I have applied class names to each in an attempt to control them differently, but can’t seem to get it to work…whenever I get the object ‘OverlappingBox’ on the right into correct position (the PDF textbook with the transparent color background), the object on the left ‘ToggleBox’(the tab box that holds the video player).

What can I do to get these two objects to sit independently the way they are arranged in the second image? I’ve tried playing with layout positioning, but it doesn’t seem to have the desired effect.

Thanks!