CODEWITHSUNDEEP
htmlcss
husharoonie
husharoonie

Reputation: 441

Constraint based on window Size CSS

Having issues adjusting to window size. Can someone help me out. I am new to css and would like the top right side of my page to adjust accordingly. Maybe you could point me in the right direction of what I am doing wrong.

Link to how the layout looks below.

I dont want things to get cut out when the browser window opens smaller than the restraints i currently have.

https://bullishtradeweb.firebaseapp.com/chatroom.html

.chart {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  right: 0px;


}



#searchTicker {

  width: 100%;
  height: 100%;

  border-radius: 12px;
  border-color: black;

  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 200px 450px 0 0;
  width: 200px;
  height: 50px;
  font-size: large;

}

#searchButton {

  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #008CBA;
  border: none;
  color: white;


  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 200px 380px 0 0;
  width: 70px;
  height: 52px;
  font-size: large;

}

#topFive1 {


    left: 50%;

    background-color: #000000;
    border: none;
    color: white;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 90px 1500px 0 70px;
    width: 110px;
    height: 55px;
    font-size: large;
}
<div class="wrapper">
        <input type="button" class="buttonCircle" id="topFive1" onclick=topFiveSearch1() ></input>
        <input type="button" class="buttonCircle" id="topFive2" onclick=topFiveSearch2() ></input>
        <input type="button" class="buttonCircle" id="topFive3" onclick=topFiveSearch3() ></input>
        <input type="button" class="buttonCircle" id="topFive4" onclick=topFiveSearch4() ></input>
        <input type="button" class="buttonCircle" id="topFive5" onclick=topFiveSearch5() ></input>

    </div>

  <input type="text" id="searchTicker" placeholder="Ticker Symbol..." required>
  <button type="button" id="searchButton" class="icon" onclick=searchButtonPressed()><i class="fa fa-search"></i></button>

Upvotes: 2

Views: 1148

Answers (1)

Pixelomo
Pixelomo

Reputation: 6737

Using media queries change the styles as the screen width gets smaller, for example below say 1000 pixels you might get some elements squashing together so CSS can watch screen width and update styles based on screen width.

Take your element, below 1000px we want to change to 100% width, this is how we do it:

@media (max-width: 1000px){
  main{
    width: 100%;
  }
}

You'll have to add all the styles you want to change at each breakpoint

Upvotes: 2

Related Questions