Responsive Scroll Bar Preview

Hi @sportswreathshop
To make the box size responsive for both desktop and mobile, you can use media queries in your CSS. Media queries allow you to apply styles based on the viewport’s dimensions (the webpage’s visible area).

Here is an example of how you can use media queries to set the width and height of the box for different viewport sizes:

#div3 {
  height: 100px;
  width: 300px;
  overflow-y: scroll;
  border: 1px solid #444;
  padding: 5px;
}

@media (max-width: 767px) { /* apply styles for viewports up to 767px wide */
  #div3 {
    width: 100%; /* set the width to 100% of the viewport */
    height: 200px; /* set the height to 200px */
  }
}

@media (min-width: 768px) and (max-width: 991px) { /* apply styles for viewports between 768px and 991px wide */
  #div3 {
    width: 50%; /* set the width to 50% of the viewport */
    height: 300px; /* set the height to 300px */
  }
}

@media (min-width: 992px) { /* apply styles for viewports larger than 992px wide */
  #div3 {
    width: 25%; /* set the width to 25% of the viewport */
    height: 400px; /* set the height to 400px */
  }
}

You can adjust the width and height values to suit your needs and add additional media queries for other viewport sizes if desired.

I hope this helps! Let me know if you have any questions.

Faisal,

Thank you so very much for this. When I replace my existing code with this, I don’t get a scroll bar. Do I need to do something additional to this code?

Thank you so much,

Catherine

Hi @sportswreathshop

In order to maintain the scrollbar on the box, you will need to ensure that the overflow-y: scroll rule is present in all of your media queries. This rule specifies that a scrollbar should be displayed on the y-axis (vertically) if the content inside the box overflows the box’s dimensions.

Here is an example of how you can include the overflow-y: scroll rule in all of your media queries:

#div3 {
  height: 100px;
  width: 300px;
  overflow-y: scroll;
  border: 1px solid #444;
  padding: 5px;
}

@media (max-width: 767px) {
  #div3 {
    width: 100%;
    height: 200px;
    overflow-y: scroll;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #div3 {
    width: 50%;
    height: 300px;
    overflow-y: scroll;
  }
}

@media (min-width: 992px) {
  #div3 {
    width: 25%;
    height: 400px;
    overflow-y: scroll;
  }
}

I hope this helps! Let me know if you have any questions.

Hi! I’ve replaced my original code (shown in the first box) with the code provided above (shown in the second box). The code in the second box does produce a scroll box. Am I misunderstanding you? Thank you, Catherine

<style>#div3 { height: 100px; width:300px; overflow-y: scroll; border: 1px solid #444; padding: 5px; }</style>
<div id="div3">
<div id="div4">

Hello. This is the Sports Wreath Shop

#div3 {
height: 100px;
width: 300px;
overflow-y: scroll;
border: 1px solid #444;
padding: 5px;
}

@media (max-width: 767px) {
#div3 {
width: 100%;
height: 200px;
overflow-y: scroll;
}
}

@media (min-width: 768px) and (max-width: 991px) {
#div3 {
width: 50%;
height: 300px;
overflow-y: scroll;
}
}

@media (min-width: 992px) {
#div3 {
width: 25%;
height: 400px;
overflow-y: scroll;
}
}

Hello. This is the Sports Wreath Shop

Is there anyone who may be able to help me, please?