HTML/CSS Responsive design

Question

I created a page with some buttons. All design is correct as is all positioning.

The problem of all is that it is not responsive.

I used some attributes like top, left and I think it hurt me in responsive design, but I may be wrong.

I wish that when reducing the window, the buttons would move (responsive design) automatically

Can anyone help me get everything responsive and in place?

#inline-container img { 
    position: absolute; 
    display: block; 
    margin: 0px; 
    border: none; 
    padding: 0px; 
}

#inline-container div { 
    position: absolute; 
}

#inline-container { 
    display: block; 
    position: relative; 
    width: 1920px; 
    height: 1080px; 
    overflow: hidden;  }

#_bg__home___quadrado___6_colunas {
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    background:rgba(255,255,255,255);
}

.search_box {
    top:16px;
    left: 1384px;
    width: 216px;
    height: 32px;
    background-color: #edf3f9;
    opacity: 0.8; 
    border: none;
    border-radius: 16px;
    line-height: 20px;
    color: black;
    text-indent: 40px;
    position: relative;
 }

.Upload {
    top: 16px;
    left: 76px;
    width: 135px;
    height: 32px;
}

.It {
    top: 24px;
    left: 728px;
    width: 88px;
    height: 24px;
}

.Ta {
    top: 24px;
    left: 944px;
    width: 92px;
    height: 24px;
}

.No {
    top: 24px;
    left: 1052px;
    width: 141px;
    height: 24px;
}

.Ca {
    top: 24px;
    left: 832px;
    width: 96px;
    height: 24px;
}

.btn-c{
    opacity: 1;
      top: 24px; 
    left: 832px;
      width: 96px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-c:active{
              width: 96px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-n{
    opacity: 1;
        top: 24px;
       left: 1052px;
      width: 141px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-n:active{
              width: 141px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-i{
    opacity: 1;
        top: 24px;
       left: 728px;
      width: 88px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-i:active{
              width: 88px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-t{
    opacity: 1;
        top: 24px;
       left: 944px;
      width: 92px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-t:active{
              width: 92px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

.btn-upload{
    top: 16px;
      left: 76px;
      width: 135px;
      height: 32px;
        cursor: pointer;
        -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
   background-color: rgb(232, 238, 245);
    outline:none;
      font-family: Noto Sans;
      font-size: 13px;
      text-align: center;
      color:#4d4f5c; 
      }


<div style="width: 100%;height: 100%;">
  <div style="width: 100%; height: calc(100% - 64px);">
      <div id="inline-container" >
          <div id="_bg__home___quadrado___6_colunas"  ></div>
          <div>
            <input type="text" class="search_box" placeholder="Search..."/> 
           </div>    
          <div class="Upload"  >             
                  <button class="btn-upload"> Upload Files</button>              
          </div>
          <div class="It">
            <button  class="btn-i">Settings</button>
          </div>

          <div class="Ta">
            <button  class="btn-t">Settings</button>
          </div>

          <div class="No">
            <button  class="btn-n">Settings</button>
          </div>

          <div class="Ca">
             <button  class="btn-c">Settings</button>
          </div>
      </div>
  </div>
</div>

Positioning is a very poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out LearnLayout.com — Paulie_D
– Paulie_D, Commented Oct 15, 2019 at 18:36
Because now I know you're right, the problem is I don't know what I have to change to make this work properly. — user11052170
– user11052170, Commented Oct 15, 2019 at 18:39
This question is really vague. It boils down to "I used absolute positioning for everything - and now everything is absolutely positioned and doesn't change."- which is exactly how you wrote the rules. I think skipping the "it doesn't work" idea will help. It does work. Exactly how it's written. The problem here is that absolute positioning isn't a great choice for layout anymore now that screens are variable sizes. You'll have to learn other layout techniques - and in general / learn to write markup and CSS well. That isn't something that we can answer in a stack overflow question. — sheriffderek
– sheriffderek, Commented Oct 15, 2019 at 19:11

sheriffderek · Accepted Answer · 2019-10-15 19:04:22Z

Here's how I would write the markup and styles for this. You can use flex-box.

https://jsfiddle.net/sheriffderek/yao1wdgp/ (live example)

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.page-section {
  border: 1px solid orange;
}

.page-section .inner-column {
  width: 98%;
  max-width: 900px; /* arbitraty */
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  border: 1px solid blue;
}

.masthead {
  border: 1px solid lime;
}

.masthead .settings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* */
  margin-top: 10px;
}

@media (min-width: 400px) {
  .masthead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .masthead .settings-list {
    display: flex;
    flex-direction: row;
    margin-top: 0;
  }
}

<header class="page-section site-header">
<div class="inner-column">
  
  <nav class="masthead">
    
    <button class="upload">upload</button>
    
    <ul class="settings-list">
      <li class="setting">
        <button>Settings A</button>
      </li>

      <li class="setting">
        <button>Settings B</button>
      </li>
      
      <li class="setting">
        <button>Settings C</button>
      </li>
      
      <li class="setting">
        <button>Settings D</button>
      </li>
    </ul>
  </nav>

</div>
</header>

Jschriemer · Accepted Answer · 2019-10-15 18:24:46Z

0

You'll have to change your positions from hardcoded pixels, ex 20px to a responsive measurement such as % or em. This is because pixels are fixed-size units while percent and ems are scalable units.

Try experimenting with different units and numbers until the page reacts in the manner you expect.

CSS Units explained

answered Oct 15, 2019 at 18:24

Jschriemer

6251 gold badge8 silver badges24 bronze badges

3 Comments

Jschriemer Over a year ago

You need to set a 100% height on all your parent elements, in this case, your inline-container

user11052170 Over a year ago

Here, still nothing :(

sheriffderek Over a year ago

How did you test "learning how units work" and then have it "not work?" Is this possible?

Brick Heck · Accepted Answer · 2019-10-15 18:25:38Z

0

Just use @media only screen and (min-width: 600px) in your css. This helps you to allow different styling for different screen sizes. Use one for Pc, tablet and smartphone. You can change in it all other CSS Attributes.

answered Oct 15, 2019 at 18:25

Brick Heck

91 bronze badge

2 Comments

sheriffderek Over a year ago

This definitely does work... - so, you may not be understanding the point. I've included @media rules in my answer.

Henrique Erzinger Over a year ago

This is not the problem here, and just adding media-queries wouldn't solve it, especially such a specific one. The problem is all of the absolute positioning. Before even thinking about responsiveness, this layout have to be made flexible.

Collectives™ on Stack Overflow

HTML/CSS Responsive design

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related