Responsive screen size for experiment

I hope I am providing enough detail here.

I am currently trying to design an experiment on Labjs and wanted to know if there is a way to make the website more responsive to screen size using HTML or CSS? What I mean by this is that can I use CSS/HTML to adjust the size of the stimuli depending on the size of the screen of the user?

My current CSS code is this:

/* Please define your custom styles here */


cons_left {
  margin-left: 10%;
  margin-right: 10%;
} 

.pickparent {
  position: relative;
  top: 0;
  left: 0;
 // border: 3px solid black;
} 

.pickpicker {
  position: relative;
  top: 0;
  left: 0;
//  border: 3px solid red;
} 

.pickimage {
  filter: grayscale(100%);
  position: absolute;
  margin: auto;
  z-index: 2;
 // border: 3px solid red;
} 

#location_percentage, #color_percentage {
  font-size: 70px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.feedback, .percentage {
  font-size: 70px;
  text-align: center;
}

.feedback {
  font-size: 70px;
  margin-top: 450px;
  display: block;
  line-height: 70px;
}

.feedback:first-line {
  font-size: 70px;
  margin-top: 100px;
  display: block;
  line-height: 120px;
}

.percentage {
  margin-top: 20px;
  margin-bottom: 20px;
}

#next-button {
    display: none;
    align-items: center;
  }

.message {
  font-size: 50px;
  text-align: center;
  position: absolute
  margin: 20%
}

I have tried change various attributes of the CSS to make it responsive but I've had no luck so far. I've also tried to implement a scaling task where the user has to adjust the size of a rectangle to the size of a card but I can't find a solution here either.

Thank you for your help!

You can use media queries to make responsive screen size for your site.

@media only screen and (max-width: 
600px) {
  body {
   background-color: lightblue;
  }
}

You can learn more about that here: W3schools media queries