[Support request] Best way to postion a container on a page

[Jonathan]

What is the best way to position the orange box on all screens?
I also need to know the best way to size it and make it stack properly on mobile.

[Ying]

Hi there,

Do you mean this box?
https://www.screencast.com/t/aLKiLkymbX4x

Do you want to position it at the same place site-wide?

[Jonathan]

They are in a grid and the content below is not set to a negative margin.
I am adding a class to the orange box grid container and adding custom CSS.
I have tried different ways, but none is working, to move the orange box down to overlay the hero section and the section below it.
This is the current CSS:
.orange_box
{position: relative!important;
left: 0px!important;
top: 350px;!important;
padding-left:100px;!important;
padding-right:100px;!important;}

I have tried:

@media (min-width: 1450px) and (max-width: 1647px){
.orange_box
{position: absolute!important;
left: 900px!important;
top: 150px;!important;
padding-left:100px;!important;
padding-right:100px;!important;}
}

@media (min-width: 1250px) and (max-width: 1449px){
.orange_box
{position: absolute!important;
left: 700px!important;
top: 150px;!important;
padding-left:100px;!important;
padding-right:100px;!important;}
}

@media (min-width: 1050px) and (max-width: 1249px){
.orange_box
{position: absolute!important;
left: 600px!important;
top: 150px;!important;
padding-left:100px;!important;
padding-right:100px;!important;}
}
Twitter
Youtube
Website
Terms of Service
Privacy P

[Ying]

I see, can you remove your CSS and try this:

@media (min-width: 769px) {
    .gb-grid-column.gb-grid-column-677ff505 {
        margin-bottom: -250px;
        margin-top: 250px;
    }
}

The CSS is targeting the Grid column which contains the container block.

[Author]

Posts