CODEWITHSUNDEEP
htmlcsszurb-foundation
user3128376
user3128376

Reputation: 994

Fixed Window Size; Zurb Foundation

I'm currently trying out Zurb Foundation and am having problem with my window size. 

<body id="gradient">
        <div id="title" class="small-2 large-6 large-centered text-center  columns">Example</div>    
</body>

Currently I have the word Example set to large-6 instead of large-12 because if I go beyond more than large-10 then my window size will have an increased width causing the left-right scroll to appear.

However, I thought I had set my css correctly to prevent that from happening. 

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#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:100% 100%;
    background-repeat: no-repeat;

}

I thought setting my background-size to 100% 100% would have my window fixed and prevent any additional width and height (as in I don't want to scroll up/down/left/right).

Reason I want to fix this is when I drag my screen to reduce the size from full screen, the word Example will disappear from the center of the screen and stays more towards the right side of the window thus you can't see the word.

Sorry if this is confusing, let me know if you need any clarifications. Thanks!

EDIT: http://jsfiddle.net/5vdobycy/9/

Hopefully I did it right, as you can see Example is not entirely center as you can scroll to the right and part of the word falls in plain white background. jsfiddle doesn't show really show it the way it looks on my browser but pretty much that's the problem I am having.

However, not sure if I didn't include Foundation right or it's because of jsfiddle, but there's no differences in changing the columns i.e. large-6 shows the same as large-12 on jsfiddle.

Upvotes: 0

Views: 174

Answers (2)

janfoeh
janfoeh

Reputation: 10328

The easiest way to get text to center is to use full-width columns and to apply text-align: center on them:

<div id="title" class="small-12 text-center column">Example</div>

Your fiddle has multiple problems:

  • you did not include Foundation at all

  • you overrode the column placement with

    position: absolute;
top: 180px;
left: 400px;

  • small-2 was too small to contain the text, so it poked out on the right:

    enter image description here

    That is also the reason why the text did not appear to be centered — the column itself was, but the text only escapes the centered column to the right.

Neither setting width, height or background-size do anything to prevent the page from scrolling. For that, you would need the overflow CSS property.

Here is a simple example that works:

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

}
#title {
    font-size: 60px;
    color: #FF8000;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css" rel="stylesheet" type="text/css">

<div id="gradient">
    <div class="row ">
        <div id="title" class="small-12 text-center column">Example</div>
    </div>
</div>

Upvotes: 2

Abdulla hawara
Abdulla hawara

Reputation: 19

css

#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: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    text-align: center;
}
#title{
    padding-top:20%;
    font-size:40px;
}

html

 <body>
    <div id="gradient">
        <div id="title">  Example :)  </div>
    </div>
</body>

Upvotes: -1

Related Questions