1

I'm just new and I'm creating a web page. Whenever I zoom in, the page does not show up the scroll button and when it came to >= 300%, the letter split into 2 lines (pic 1). How to make the page work statically like in pic 2, and when zoom out at less than 100%, the width is still 100%?

Pic1: enter image description here

Pic2: enter image description here

#Header {
  background-color: #1abbcc;
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  font-size: 32px;
}

body {
  margin: 0;
  font-family: Tahoma;
  width: 100%;
}

span {
  left: 0%;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div id="Header">
  <span>
    CSP Online Practice Environment
  </span>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
quanpham0805
  • 277
  • 2
  • 5
  • 14

1 Answers1

0

Therese some of tricks here to resolve you'r issue:

1) We can improve style by remove absolute position, you can determine a position in your case without set absolute, absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

2) if we need to use absolute we can fix it by using media query like @media only screen and (width : 1024px) { /* Your Styles */ } , Look at this answer too for more details media query for differant zoom

<!DOCTYPE html>
     <html>
        <head>
            <meta charset = "utf-8" />
            <title> CSP COPE </title>
            <style>
              #Header
              {
                  background-color : #1abbcc;
                  color: white;
                  text-align: center;
                  width: 100%;
                  font-size: 32px;
              }

              body
              {
                  margin: 0;
                  font-family: Tahoma;
                  width: 100%;
              }

              span
              {
                  width: 100%;
                  transform: translateY(-50%);
              }
            </style>
        </head>
 
        <body>
            <div id="Header">
                <span>
                    CSP Online Practice Environment
                </span>
           </div>
        </body>
    </html>
Anees Hikmat Abu Hmiad
  • 3,460
  • 2
  • 19
  • 36
  • I tried but it doesnt work.I tried to put the width to some specific number like 1000px then it works, exactly what I want when zooming in, but when zooming out, it show that the width does not fit the page. – quanpham0805 Oct 14 '18 at 17:15
  • Fixed width will be work in fixed point only...zooming behavior its work dependence of style sheet code...for example if you zoom in/out in stackoverflow website, you see in zoom-in website work like responsive, but when its zoom-out website will be smallest like current view in screen.... and to do this, you'r code most be handling absolute, fixed position... and build html layout with font as aspect ratio and order...other wise no solution to do different behavior since its browser behavior such as you cant prevent zooming or any thing else....etc – Anees Hikmat Abu Hmiad Oct 14 '18 at 20:58