Transparent Overlapping Box Help ( Pro Theme )

[thalff]

(cross post from Peer to Peer)

Can anyone give me a tip on how to achieve what is in the mockup I have attached an image of? There are arrows showing what I am specifically talking about. I need to create a transparent box and then perhaps use negative margins to push it up onto the image above it.

Columns with negative margins probably won’t work here since the boxes are off center and smaller than the column itself.

[Alaa]

Hi @thalff

You can just add another row in the same section, this row could be divided into columns, the most right column can be relocated by CSS code like this added in the element CSS area:

$el {
  margin-top: -75px;
  margin-right: 20px!important;
  width: 25%!important;
}

to achieve what you want, I’ve done that already on a demo site I’ve to get something like this:

I believe this is something very close to what you have shared already, I’ve exported my demo page template to this file:

https://mega.nz/#!ClEWiYBD!jgdWtffYj9HpOrola6HmitXz9QHsnKKL-0kxX3lsJE0

So, you can just download it and start building on it as a base structure for your page.

To learn more about page templates, please check this guide:

Template Manager | Themeco Docs

Thanks.

[thalff]

This is awesome, thank you so much. Is there any code you would add to avoid it from pinching on mobile? Please see attached screenshot.

[thalff]

Hmm so there is a second section like this that involves four columns, three of which overlap. Please see my botched attempt at making it work based on the groundwork you laid as well as the mockup of what it should look like.

Can’t state how much I appreciate your help.

[Alaa]

Hi @thalff

You can just wrap the CSS code I mentioned above like this:

@media screen and (min-width: 860px){
	$el {
	  margin-top: -75px;
	  margin-right: 20px!important;
	  width: 25%!important;
	}
}

That way, the code will only be applied on screens larger than 860px width.

• It’s the same thing, perhaps you just need to modify the CSS to be like:

$el {
    margin-top: -50px;
    margin-left: 3%!important;
    width: 20%!important;
}

To get something like that:

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Thanks.