How would I make this grid responsive?

Code: https://jsfiddle.net/j6xL8yop/3/

.grid {
  width: 699px;
  height: 393px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto;
  background-color: black;
}

.item1 {
  background-color: blue;
}

.item2 {
  background-color: red;
}

.item3 {
  background-color: green;
}

.item4 {
  background-color: orange;
}
<div class="grid">

  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>

</div>

Don’t use px dimensions to the overall size. This is why it is unresponsive. You made the grid fixed, so it can’t react to the browser changes. Change px to %, such as 100%.

1 Like

Then what?

Code: https://jsfiddle.net/4ex8gkLa/

Also, the squares should just shrink and expand, but not stack.

You could add

width: 90vw;
height: 90vh;

to

.grid

vh is a unit that is 1/100th of the viewport height. vw the same except, of course, re viewport width.

So you don’t mean responsive at all?

It sounds like you want to maintain the aspect ratio of each square which is not really responsive as they will be a fixed width and height irrespective of their content.

If this is another of your tests with just coloured squares then you’d create an aspect ratio in the way that you have been shown before on your videos using vertical padding to create the aspect ratio.

e.g.

For modern browsers you could use the aspect-ratio property instead of the padding.

You could also use vw units for width and height and then they will still maintain their aspect ratio.

Of course (as usual) we don’t really have enough detail about the problem you are trying to overcome or what exactly you are trying to achieve in order to give you the answer you want :slight_smile:

5 Likes

I simply added this

@media screen and (max-width: 800px) {
 .grid {
  width: 499px;
  height: 293px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto;
  background-color: black;
}
}

@media screen and (max-width: 562px) {
 .grid {
  width: 299px;
  height: 193px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto;
  background-color: black;
}
}
@media screen and (max-width: 343px) {
 .grid {
  width: 199px;
  height: 100px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto;
  background-color: black;
}
}

The Grd Will size down when your screen in smaller

How come neither padding or aspect ratio work on this code?

code https://jsfiddle.net/9jdbgzLh/1/

Code: https://jsfiddle.net/9jdbgzLh/1/

#container_button {
  background-color: #252525;
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  margin-top: 0px;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  -webkit-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
  -moz-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
  box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
}

#hole {
  background-color: #151515;
  width: 310px;
  height: 310px;
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  position: relative;
  -webkit-border-radius: 155px;
  -moz-border-radius: 155px;
  border-radius: 155px;
  -webkit-box-shadow: 1px 1px 0px #5d5d5d;
  -moz-box-shadow: 1px 1px 0px #5d5d5d;
  box-shadow: 1px 1px 0px #5d5d5d;
}

#button {
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  cursor: pointer;
  top: -5px;
  position: relative;
  background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  border-radius: 150px;
  -webkit-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
  -moz-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
  box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}

#button:active {
  top: 5px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: inset 0px 2px 0px #a8a8a8;
}

#triangle {
  width: 0px;
  height: 0px;
  margin-left: 50%;
  margin-top: 50%;
  left: -27px;
  top: -50px;
  position: relative;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 80px solid #22a9db;
  z-index: 2;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #triangle {
  border-left: 80px solid #45bde9
}

#button:active #triangle {
  border-left: 80px solid #e94545
}

#lighter_triangle {
  width: 0px;
  height: 0px;
  margin-left: 50%;
  margin-top: 50%;
  left: -27px;
  top: -48px;
  position: absolute;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 80px solid #43c0ee;
  z-index: 1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #lighter_triangle {
  border-left: 80px solid #8bdaf7
}

#button:active #lighter_triangle {
  border-left: 80px solid #f78b8b
}

#darker_triangle {
  width: 0px;
  height: 0px;
  margin-left: 50%;
  margin-top: 50%;
  left: -28px;
  top: -53px;
  position: absolute;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 80px solid #0a7da7;
  z-index: 1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #darker_triangle {
  border-left: 80px solid #1d98c5
}

#button:active #darker_triangle {
  border-left: 80px solid #c51d1d
}
<div id="container_button">
  <div id="hole">
    <div id="button">
      <div id="triangle"></div>
      <div id="lighter_triangle"></div>
      <div id="darker_triangle"></div>
    </div>
  </div>
</div>

In what context and what do you want it to respond to?

Normally when devs use the term “responsive” they are referring to a site adjusting it self to it’s window size ( or other such constraints)

This is commonly achieved via media queries ( tho there are other tricks available).

So… returning to your original question… the following is needed:

  1. What is your context ( for example.: browser window size)
  2. What would be your break points (for example: >500px, >1000px)
  3. What do you want to happen at each break point ( for example: default text color is black, >500px red, >1000px blue)

Once you have those decisions made, you can code the media queries…

			@media screen and (min-width:500px){
				body{ color:red;}
			}
			@media screen and (min-width:1000px){
				body{ color:blue;}
			}```
in the above code,  the body text color starts as default(black),  turns red at 500px, and then blue at 1000px.
Conceptually,  you can  change the break point values, direction (min width, max-width, etc, etc) and change the particular CSS rules you want to vary any given break point. 


hope that sheds some light on the subject.

The play button should shrink and expand.

To have the button size be proportional to browser window width: divide all pixels values by 10 (for example), allowing decimal values, and change all px to vw. As your container <div> is currently 400 pixels square, that would make your container become 40% of the browser window width.

2 Likes

I tried using these two methods, both didn’t work.

#container_button > div {
  padding-top: 56.23%;
}
#container_button > div {
  aspect-ratio: 16 / 9;
}

You can’t just throw a single rule or two at this and expect it all to change. The code you refer to is the way that the wrapper of the element could be made responsive but you would have to position all your inner elements in a way that is related to the size of that element.

In essence you can’t use pixels to make something scale up and down automatically with the parent. 400px wide is always 400 pixels wide.

If instead the parent element was a responsive structure (using percent or vw units or an aspect ratio technique) you would then place the inner elements in relation to that parent but they would not use pixels. You’d have to use some form of fluid units such as percent. e.g. top:10%, left:10% if you are absolute positioning things.

Or you could size the element in vw units and then make all your other pixel measurements in vw also so that they scale uniformly together. Of course this gets very awkward where you have box shadow and coloured borders to take care of.

I’ve quickly changed your design to vw units but it needs a lot more work and I don’t have the time or inclination to refine it further :slight_smile: However it should show the the things that you need to change in order to scale up and down.

There are other ways to scale in that you use media queries and change all the sizes at certain breakpoints (which is called an adaptive method).

If instead you had drawn the button in an svg editor then you could simply scale the whole thing by changing the width and height of the svg much in the same way that responsive images are scaled up and down.

2 Likes

How come it doesn’t look exactly as the original did before?

I think you’ll find your answer here:

Paul’s shown you how it can be done, and it’s up to you to refine the details. smile

1 Like

As @TechnoBear kindly pointed out I already told you that further refinement would be down to you. I have given you the basics and its your job to make it perfect. All the elements are there and you just need to work out the exact amounts for everything to be as perfect as it can be.

It would have been easier if I hadn’t got rid of all those unnecessary divs because my html is clean so you may want to work through your html and apply the same processes to your divs if that makes it easier for you to understand.

As is stands it is very close to the original already as can be seen by the screenshot of them side by side.

… and on smaller screens:

Screen Shot 2021-06-29 at 12.07.18

The hover states need a bit of work as they are not matching the original but as I said I don’t have the inclination to refine further. You need to sit down and work out how 1px equates to a percentage of 400px which is the size you based everything on. Then for every pixel measurement you would use the exact fraction of the vh unit which would match the original units you used. For example if the element was set to 20vw width and height to start with (which will scale with the viewport) then 1px would equate to a 400th of that 20vw if it were to match the original (= .05vw). Of course once you get into fractions then you will get rounding errors so in cases where you only have a 1px overlap (such as in the triangles) then you may want to keep them to pixels but of course then they won’t scale. There is no perfect answer because a pixel is the smallest unit and fractions of pixels get rounded up or down.

The basics are as @Archibald said above and you need to convert all pixels to vw at appropriate values.

As I said above the best solution would be to draw as an svg and then scaling it is simple.

2 Likes

Like this?

Code: https://jsfiddle.net/L94rmxy0/

And, is there anything in this code that can be removed without affecting, or degrading the appearance of the image?

#container_button {
  background-color: #252525;
  width: 31.25vw;
  height: 31.25vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0vw;
  margin-top: 0vw;
  -webkit-border-radius: 15.625vw;
  -moz-border-radius: 15.625vw;
  border-radius: 15.625vw;
  -webkit-box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
  -moz-box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
  box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
}

#hole {
  background-color: #151515;
  width: 24.2188vw;
  height: 24.2188vw;
  margin-left: auto;
  margin-right: auto;
  top: 3.9063vw;
  position: relative;
  -webkit-border-radius: 12.1094vw;
  -moz-border-radius: 12.1094vw;
  border-radius: 12.1094vw;
  -webkit-box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
  -moz-box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
  box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
}

#button {
  width: 23.4375vw;
  height: 23.4375vw;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  cursor: pointer;
  top: -0.3906vw;
  position: relative;
  background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
  -webkit-border-radius: 11.7188vw;
  -moz-border-radius: 11.7188vw;
  border-radius: 11.7188vw;
  -webkit-box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
  -moz-box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
  box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}

#button:active {
  top: 0.3906vw;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8;
}

#triangle {
  width: 0vw;
  height: 0vw;
  margin-left: 50%;
  margin-top: 50%;
  left: -2.1094vw;
  top: -3.9063vw;
  position: relative;
  border-top: 3.9063vw solid transparent;
  border-bottom: 3.9063vw solid transparent;
  border-left: 6.25vw solid #22a9db;
  z-index: 2;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #triangle {
  border-left: 6.25vw solid #45bde9
}

#button:active #triangle {
  border-left: 6.25vw solid #e94545
}

#lighter_triangle {
  width: 0vw;
  height: 0vw;
  margin-left: 50%;
  margin-top: 50%;
  left: -2.1094vw;
  top: -3.75vw;
  position: absolute;
  border-top: 3.9063vw solid transparent;
  border-bottom: 3.9063vw solid transparent;
  border-left: 6.25vw solid #43c0ee;
  z-index: 1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #lighter_triangle {
  border-left: 6.25vw solid #8bdaf7
}

#button:active #lighter_triangle {
  border-left: 6.25vw solid #f78b8b
}

#darker_triangle {
  width: 0vw;
  height: 0vw;
  margin-left: 50%;
  margin-top: 50%;
  left: -2.1875vw;
  top: -4.1406vw;
  position: absolute;
  border-top: 3.9063vw solid transparent;
  border-bottom: 3.9063vw solid transparent;
  border-left: 6.25vw solid #0a7da7;
  z-index: 1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

#button:hover #darker_triangle {
  border-left: 6.25vw solid #1d98c5
}

#button:active #darker_triangle {
  border-left: 6.25vw solid #c51d1d
}

<div id="container_button">
  <div id="hole">
    <div id="button">
      <div id="triangle"></div>
      <div id="lighter_triangle"></div>
      <div id="darker_triangle"></div>
    </div>
  </div>
</div>

Yes . . . . . . but you still have px dimensions in there and in particular that is making the box-shadow of the button appear too large when the button is small (i.e. when viewed in a small browser window) and not large enough when the button is large.

As far as I can see, you can change the box-shadow for the button from:

box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;

to:

box-shadow: inset 0px 2px 0px #a8a8a8, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;

and then change (and scale) the px values to vw values to make the shadow responsive.

1 Like

Look at the code again, I fixed that, didn’t I?

Code: https://jsfiddle.net/L94rmxy0/

That looks good to me :grinning:.

2 Likes