Menu icon Foundation
Best way to position elements

I'm having problem where, for example, I have a title placed on the page in a certain place using i.e. top: 150px.
However, once I start reducing my window size it cuts off my background. I realized that using tags like 'top' or 'margin-top' causes this to happen since it wants to stay at that certain place.

I've tried using "background-size: cover" in my "body" and various "positions" in my "#title" but still couldn't fix this problem.

What's the best way to position grid elements that eliminates these kind of problems?

I'm having a hard time positioning elements on the page using the grid system.

Thanks!

EDIT: html code


<!-- TODO: Fix title position; window size, can't do large-12 -->
<!-- Title -->

Example


html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
/*
    min-width: 1200px;
    min-height: 800px;
*/
}

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
/*    background-size:cover;*/
    background-size:100% 100%;
    background-repeat: no-repeat;
}

#title {
    font-size: 60px;
    color: #FF8000;
/*    Messes up height when margin-top is added*/
/*    margin-top: 150px;*/
/*    position: fixed;*/
/*    position: relative;*/
    top: 150px;
}
            

         

Untitled

<html>
<body id="gradient">

  
    <!-- TODO: Fix title position; window size, can't do large-12 -->
    <!-- Title -->
    <div class="row ">

        <div id="title" class="small-16 large-12 large-centered text-center columns">Example</div>

    </div>
 </body>
</html>
            

         

csshtmlgrid

I'm having problem where, for example, I have a title placed on the page in a certain place using i.e. top: 150px.
However, once I start reducing my window size it cuts off my background. I realized that using tags like 'top' or 'margin-top' causes this to happen since it wants to stay at that certain place.

I've tried using "background-size: cover" in my "body" and various "positions" in my "#title" but still couldn't fix this problem.

What's the best way to position grid elements that eliminates these kind of problems?

I'm having a hard time positioning elements on the page using the grid system.

Thanks!

EDIT: html code


<!-- TODO: Fix title position; window size, can't do large-12 -->
<!-- Title -->

Example


html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
/*
    min-width: 1200px;
    min-height: 800px;
*/
}

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
/*    background-size:cover;*/
    background-size:100% 100%;
    background-repeat: no-repeat;
}

#title {
    font-size: 60px;
    color: #FF8000;
/*    Messes up height when margin-top is added*/
/*    margin-top: 150px;*/
/*    position: fixed;*/
/*    position: relative;*/
    top: 150px;
}
            

         

Untitled

<html>
<body id="gradient">

  
    <!-- TODO: Fix title position; window size, can't do large-12 -->
    <!-- Title -->
    <div class="row ">

        <div id="title" class="small-16 large-12 large-centered text-center columns">Example</div>

    </div>
 </body>
</html>
            

         
Rafi Benkual over 4 years ago

There are all kinds of tricks to do this. Here's one I like:

Absolute centering http://codepen.io/rafibomb/pen/MYNwKj

This only requires a height for #title and the positioning stuff.

Kevin over 4 years ago

When I resize the height to a really small size using your codepen, the background still "disappears", the background becomes white at the bottom. Are there other tricks?

Rafi Benkual over 4 years ago

I'm not seeing any issue. Can you share an example or screenshot?

Jesus Lugo over 4 years ago

Kevin,

Have you tried just using padding-top instead for #title ?, I think that could make the job. Not sure if adding overflow:hidden to #gradient would work in your case... Another thing you can do is add an element to do the "spacing", so you can remove it when there's little space available (like on mobiles).

I've always think on the grid as relationship between elements, and the flowing across devices... A stiff margin looks kinda awkward to me... In your case, I'd use 9.37rem instead of the 150px, or even use a percentage, but that's my point of view.

Hope this can help

Colin Nichols over 4 years ago

I believe this is just some missing CSS, try defining background-attachment and see if that fixes your issue with the white background appearing.

For example;

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
/*    background-size:cover;*/
    background-size:100% 100%;
    background-repeat: no-repeat;


    background-attachment: fixed;
}