Website display differently with different screen size

Question

I am really new to web design. I am building a website for students at my school. However, on my mac, the content is displayed at the center. But on windows, the content has more room on the right than left.

  .inner { text-align: center; display: inline-block; position: absolute; top: 30%; left: 25%; margin: 0 auto; }

  <div class="inner"> <h1>What are you looking for?</h1> <br> <button class="button button4"><font size="6">Developer</font></button> <button class="button button4"><font size="6">Entrepreneur<font size="6"></button> <button class="button button4"><font size="6">Other<font size="6"></button> </div>

Answer 1

Check this code it may help you

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .inner-div { text-align: center; margin: 0 auto; background-color: #fafafa; border: 1px solid #ccc; width: 40%; min-height: 200px; } .button { background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px 20px; text-align: center; font-size: 14px; } .button:hover { background-color: #f9f9f9; border: 1px solid #aaa; padding: 10px 20px; text-align: center; font-size: 14px; cursor:pointer; } @media screen and (max-width: 1024px) { .inner-div { width: 60%; } } @media screen and (max-width: 678px) { .inner-div { width: 90%; } .button { width: 100%; } } </style> </head> <body> <div class="inner-div"> <h1> What are you looking for?</h1> <br> <button class="button"> Developer </button> <button class="button"> Entrepreneur </button> <button class="button"> Other </button> </div> </body> </html>

Website display differently with different screen size

Question

1 answers

solution1
0 2017-09-30 04:40:50

Website display differently with different screen size

Question

1 answers

solution1 0 2017-09-30 04:40:50

solution1
0 2017-09-30 04:40:50