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

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

Home Forums Support Best way to postion a container on a page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2323744
    Daniel

    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.

    #2323886
    Ying
    Staff
    Customer Support

    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?

    #2323894
    Daniel

    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

    #2323912
    Ying
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.