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

Html – 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!

Tags:

2

Answers


  1. 0

    You can use CSS media queries to have your website styled according to the screen size.

    For example:

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

@media screen and (min-width: 600){
.message {
  font-size: 70px;
  margin: 50%;
}
}

    In the above code the message class the font-size is set to 50px and the margin to 20%. But on screens bigger than 600px, the font-size is set to 70px and the margin to 50%.

    If you don’t specify a media query, it’ll be applied on all screen sizes.

    You don’t need to duplicate the rules, for example, the position is applied to all screen sizes, so no need to specify it in the media query.

    Similar question

    Mozilla CSS_media_queries

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search