CODEWITHSUNDEEP
htmlcss
Muhammad Saqlain Arif
Muhammad Saqlain Arif

Reputation: 544

CSS issue when zooming

I wrote CSS for screen size bigger than 1100 px. When I press ctrl and +(plus) sign and zoom in the center container of the page can't wrap. It breaks suddenly.

HTML:

<div id="outer_footer_bottom">
    <div class="center">
        blabla balaa blabalblabla
    </div>
</div>

CSS:

<style>
    #outer_footer_bottom{
        width: 100%;
        float: left;
        background: #8ac53f;
        height: 26px;
        padding: 16px 0 0 0;
        text-align: center;
        color: #fff;
        overflow-x: auto;
    }

    .center {
        width: 1000px;
        margin: 0 auto;
    }
</style>

Upvotes: 1

Views: 1113

Answers (4)

AmanS
AmanS

Reputation: 1520

the problem is in your code.

your "outer_footer_bottom" div has width 100% (not fixed)
and the "center" div has width 1000px (fixed)

lets suppose you have zoom level 100% and your window size is approximately 1200px this means that your "outer_footer_bottom" div has width 1200px and size of "center" div is 1000px.

ok when you increase the zoom level the window size decreased and size of "outer_footer_bottom" will become lesser than 1000px. but size of "center" div remain unchanged i.e 1000px.

so that is the reason you are facing this problem.

SOLUTION 1: change the "outer_footer_bottom" div's width to fixed (e.g 1000px or 1200px)

SOLUTION 2: change the "center" div's width to unfixed (e.g 100% or 90%)

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

You have nothing problem with your code. When you increase or decrease the zoom level it is having 100% width in #outer_footer_bottom and showing scroll-bar when your zoom level less than 1000px defined in .center

Upvotes: 0

Leo T Abraham
Leo T Abraham

Reputation: 2437

.center {
        margin: 0 auto;
    }

Remove width:1000px from the style of center class.

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

Try using media queries to get responsive web design

Check the following articles to get started

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

Upvotes: 2

Related Questions