CSS to enable vertical alignment and responsiveness

Question

The code below is horizontally responsive by default. However, it’s not vertically responsive. Is there any CSS element one could use to enable vertical responsiveness?

<html>
<style>
    body {background-color: black; color: white; text-align: center;}
    svg  {width: 100px; height: 100px;}
    img  {width: 300px; height: 300px; border: 1px solid currentColor; border-radius:50%}
</style>

    <body>
        <img class="centered-and-cropped">
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg>
    </body>

<svg style="display: none;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

ScreenClip

I tried the elements below.

vertical-align: middle
align-content: center
align-items: center
align-self: center
resize: vertical; justify-content: center;

But they didn't work.

Kameron · Accepted Answer · 2021-12-21T18:46:09.710

I sort of re-worked your HTML a bit. I would nest all svg's in a wrapper and flex that wrapper. Then you can nest each svg individually in divs. For this example, I called them row-contain I flexed that div also.

The thing is with vertical responsiveness is you have fixed widths on your img and svg so if you load them into your site with the correct width and height you desire and then keep this same flex layout they should resize automatically vertically. For example, you can use sample media queries. to resize the elements for different heights. You can see my sample on I added to your CSS for the large circle. Please see the changes below.

body {
  height: 100vh;
  background-color: black;
  color: white;
  text-align: center;
}

/* Parent to row-contain, nesting all SVG's */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-contain {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* SVG fixed-height → standard device height */
 svg {
    width: 100px;
    height: 100px;
}
 img.centered-and-cropped {
    width: 300px;
    height: 300px;
    border: 1px solid currentColor;
    border-radius: 50%;

}


/* Media queries for circles */
@media only screen and (max-height: 750px) {
  img.centered-and-cropped { /* big circle resize */
    height: 150px;
    width: 150px;
  }
  
  svg { /* Fill's in for SVG for media */
    outline: solid 1px white;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-left: 10px;
  }
  
  use { /* display: none; on `use` to get rid of main SVG → vertical responsiveness kicks in */
    display: none;
  }
}

/* try removing the last media query and see that when the initial SVG resizes 
it gets clipped. TBH, I don't work with SVG's much but I'm sure there is a way 
around it, but for now this solution shoulld work just fine */

<html>


    <body>
       <img src="https://dummyimage.com/600x400/000/fff" class="centered-and-cropped">
    <div class="wrapper">
        <br><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
      </div>      
    </div>

    </body>

<svg style="display: none; height: auto; width: auto;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

Thanks for the answer, @Kameron. However, only the large circle is vertically-responsive **without aspect-ratio** preservation. The smaller circles aren't vertically responsive like they are horizontally. Screen clip link: https://i.imgur.com/LnbRhEE.gif. I'm ok to use the width as `auto` if that simplifies things. — Ayan Mullick, Dec 20 '21 at 21:53
@AyanMullick see the adjusted. The problem is the circles have fixed-heights and won't change vertically unless they have dynamic height. — Kameron, Dec 20 '21 at 22:43
yes, now the big circle's aspect ratio is maintained during vertical adjustment too. However, the SVG's aren't responding to vertical adjustment like they are to a horizontal adjustment. Does one need to use dynamic heights with SVG's? Wonder why does it not impact horizontal responsiveness? — Ayan Mullick, Dec 20 '21 at 23:48
This says one needs to add the media query inside of the SVG. https://www.creativebloq.com/how-to/10-golden-rules-for-responsive-svgs — Ayan Mullick, Dec 21 '21 at 03:30
Will do, @Kameron. Yes, now the SVG's are vertically responsive. But the tag is gone from the main div in the body. Did you remove it on purpose? Does one need to add the image source in the style? — Ayan Mullick, Dec 21 '21 at 18:07
@AyanMullick I removed the image and replaced it with a div because you can then use max/min-height and width to make it more responsive. I felt the div makes more sense because the image styles were essentially doing the same. However, a div with those styles is more responsive. Do you have an image src as part of your HTML initially? I figured it was just for styles. — Kameron, Dec 21 '21 at 18:24
Yes, I have an image source. like in the link below. https://ayan.mullick.in/ :) — Ayan Mullick, Dec 21 '21 at 18:30

score 0 · Answer 2 · answered Dec 20 '21 at 20:37

ty this way:

<body>
  <div class="outer">
  <div class="svg">
    <img class="centered-and-cropped">
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>
    <svg><use href="#Circle"></use></svg>
  </div>
</div>
</body>

and css

.outer{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

No, @richard. I get the same behavior for vertical responsiveness when tested on the latest versions of Edge and Chrome. — Ayan Mullick, Dec 20 '21 at 20:42

CSS to enable vertical alignment and responsiveness

2 Answers2