Question 43231 in Html Question posted in
Some basic documentation can be found here.

how to make certain elements resize according to window with css – Html

keep in mind: I’m a beginner

I looked everywhere and no answer really helped with this even tho it’s a really simple concept I think

So basically I have a few < a > buttons inside a < div > (a div that takes up only 50% of its parent) and they look okay in full screen. But when I adjust the window size into a smaller one,the < a > elements get all messed up.

here’s a picture of the page in full screen and here’s one with a smaller window

I tried setting each button’s width to 10% in the code below but it didn’t change anything (I also tried using VH units and it didn’t either)

here’s the full HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width-device,initial-scale=1">
<title>home</title>
<style>
    #buttons_div>a{
        color: black;
        background-color: white;
        border-radius: 12px;
        padding: 10px;
        margin: 5px 5px 2px 2px;
        width: 10%;
    }
    #buttons_div>a:hover{
        background-color: gray;
        border:10px solid;
        border-color: white;
    }
    #buttons_div{
        width: 50%;
    }
    
    div{
        padding-top: 30px;
        border: white 7px solid;
        padding-bottom: 30px;
    }

    div>img{
        width: 100%;
    }

</style>
</head>
<body bgcolor="black" align="center">
<div id="everything">   
<!------------------------------->
<div id="buttons_div">  
<a href="test.png">button1</a> 
<a href="test.png">button2</a> 
<a href="test.png">button3</a> 
<br>
</div>
<!------------------------------->
 <div id="imgdiv">
 <img src="stairs2.jpg">    
</div>
</div>
</body>
</html>
Tags:

3

Answers


  1. 0

    You need to create rows and columns in you div element.If you don’t the buttons are positioned on the same line, so if the line length Is too small the last element is positioned in a new line
    https://www.w3schools.com/howto/howto_css_three_columns.asp

    Login or Signup to reply.
  2. 0

    a elements are inline and therefore doesn’t listen to width or margin. Add display: block or display:inline-block if you want them aligned in one row

    Login or Signup to reply.
  3. 0

    Well, without understanding exactly what the OP’s end goal is, I think they broadly have 3 options (pictured in the demo below):

    1. SVG texts. These will scale with the available space, but in my opinion are a lot more work than they’re worth. (As a sidenote, I don’t know why the SVGs in the example below look so bad, but I’m confident they could be cleaned up if this is really the direction you want to go in). I believe you’ll also need a JS solution to make the <text> elements behave like links.

    2. Just chop the text off. Allow content to be clipped and/or ellipsied if there isn’t enough space

    3. Use media queries to make the text/buttons smaller at low screen widths in one or more increments.

    4. (not pictured) put all these links into a sidebar, dropdown, or hamburger menu of some kind. Eventually the screen will be small enough that shrinking the font/buttons will just make them unreadable, so a solution like this is probably the most robust (there’s a reason that every mobile site ever has a hamburger menu)

        .buttons_div>a {
      color: black;
      background-color: white;
      border-radius: 12px;
      padding: 10px;
      overflow: hidden;
    }

    .buttons_div>a:hover {
      background-color: gray;
      border: 10px solid;
      border-color: white;
    }

    .buttons_div {
      width: 50%;
      display: flex;
      justify-content: center;
      gap: 5px;
      
    }

    div {
      padding-top: 30px;
      border: white 7px solid;
      padding-bottom: 30px;
    }

    div>img {
      width: 100%;
    }

    body {
      background-color: black;
    }

    svg{
      background-color: white;
      border-radius: 12px;
      height: 40px;
      max-width: content;
    }
    
    text{
      stroke: black;
      font-size: 16px;
      transform: translateX(-25%) translateY(4px);
    }
    
    
 @media (max-width: 500px)
 {
   .mediaQuery{
      font-size: 8px;
      gap: 3px;
      
    }
    
    .mediaQuery>a{
      margin: 0px;
      padding: 5px;
    }
 }
    
    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device,initial-scale=1">
    <title>home</title>

  </head>

  <body bgcolor="black" align="center">
    <div id="everything">
      <!------------------------------->
      <div class="buttons_div">
        <svg viewbox="0 0 100 30">
          <text y="50%" x="50%">button 1</text>
        </svg>
        <svg viewbox="0 0 100 30">
          <text y="50%" x="50%">button 2</text>
        </svg>
        <svg viewbox="0 0 100 30">
          <text y="50%" x="50%">button 3</text>
        </svg>
      </div>
      <div class="buttons_div">
        <a href="test.png">button1</a>
        <a href="test.png">button2</a>
        <a href="test.png">button3</a>
      </div>
      <div class="buttons_div mediaQuery">
        <a href="test.png">button1</a>
        <a href="test.png">button2</a>
        <a href="test.png">button3</a>
      </div>

    </div>

    <!------------------------------->
    <div id="imgdiv">
      <img src="stairs2.jpg">
    </div>
    </div>
  </body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search