I have a style that I'm trying to implement into my web page.

.dp-htkhbrvt {
  align-items: flex-start;
  background-color: #fafffc;
  border: 0.07vw none;
  display: flex;
  height: 71.11vw;
  padding: 0 0.01vw;
  width: 100.0vw;
}

.dp-htkhbrvt .text-7 {
  color: var(--black);
  margin-left: 4.38vw;
  margin-top: 68.89vw;
  min-height: 1.11vw;
  min-width: 3.4vw;
}

.dp-htkhbrvt .text-6 {
  color: var(--black);
  margin-left: 1.39vw;
  margin-top: 68.89vw;
  min-height: 1.11vw;
  min-width: 2.36vw;
}

.dp-htkhbrvt .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3.4vw;
  margin-left: 23.68vw;
  margin-top: 13.26vw;
  min-height: 57.85vw;
  width: 64.79vw;
}

.dp-htkhbrvt .logo-option-2 {
  height: 5.35vw;
  margin-left: 7.36vw;
  width: 14.86vw;
}

.dp-htkhbrvt .overlap-group {
  height: 49.1vw;
  position: relative;
  width: 64.79vw;
}

.dp-htkhbrvt .log-in-card {
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.35vw;
  box-shadow: 0.0vw 0.62vw 3.19vw #0000001a;
  display: flex;
  flex-direction: column;
  gap: 1.39vw;
  height: 27.08vw;
  left: 0;
  padding: 2.78vw 2.08vw;
  position: absolute;
  top: 0;
  width: fit-content;
}

.dp-htkhbrvt .text-1 {
  color: var(--black);
  margin-top: -0.07vw;
  width: fit-content;
}

.dp-htkhbrvt .type-bar-icon-right {
  gap: 16.53vw;
  height: 3.26vw;
  padding: 0.9vw 0.69vw 0.9vw 0.0vw;
}

.dp-htkhbrvt .group-8 {
  align-self: stretch;
  height: 1.46vw;
  margin-right: -0.14vw;
  min-width: 6.67vw;
  position: relative;
}

.dp-htkhbrvt .text_label {
  color: var(--black);
  direction: rtl;
  font-weight: 400;
  left: 0;
  line-height: normal;
  opacity: 0.5;
  position: absolute;
  top: 0;
}

.dp-htkhbrvt .type-bar-icon-left {
  padding: 0.9vw 0.69vw;
}

.dp-htkhbrvt .icon-eye {
  height: 1.67vw;
  min-width: 1.67vw;
}

.dp-htkhbrvt .text-2 {
  align-self: stretch;
  color: #000000cc;
  flex: 1;
  margin-top: -0.05vw;
  opacity: 0.5;
}

.dp-htkhbrvt .text-3 {
  align-self: stretch;
  color: var(--black);
  flex: 1;
  font-family: var(--font-family-arimo);
  font-size: var(--font-size-m);
  letter-spacing: 0;
  text-decoration: underline;
}

.dp-htkhbrvt .primary-action-btn {
  background-color: var(--main);
  border-radius: 0.35vw;
  height: 3.47vw;
  min-width: 25.35vw;
  position: relative;
}

.dp-htkhbrvt .text-4 {
  color: var(--black);
  left: 10.07vw;
  position: absolute;
  top: 0.9vw;
}

.dp-htkhbrvt .text-5 {
  color: var(--black);
  text-align: center;
  width: fit-content;
}

.dp-htkhbrvt .illustration-1 {
  height: 24.31vw;
  left: 24.38vw;
  position: absolute;
  top: 24.79vw;
  width: 40.42vw;
}

.dp-htkhbrvt .text {
  direction: rtl;
  font-weight: 400;
  line-height: normal;
}

.dp-htkhbrvt .type-bar-icon {
  align-items: center;
  border: 0.05vw solid;
  border-color: var(--black);
  border-radius: 0.35vw;
  display: flex;
  justify-content: flex-end;
  width: 25.35vw;
}

<input type="hidden" id="anPageName" name="page" value="dp-htkhbrvt" />
<div >
  <div >
    <div >צור קשר</div>
    <div >אודות</div>
    <div >
      <img  src="{% static 'images/img/logo.svg' %}" alt="logo option 2" />
      <div >
        <div >
          <h2 >כניסה למערכת</h2>
          <div >
            <div >
              <div >שם משתמש</div>
            </div>
          </div>
          <div >
            <img  src="{% static 'images/img/eye.svg' %}" alt="icon-eye" />
            <div >סיסמה</div>
          </div>
          <!-- <div >שכחתי סיסמה</div> -->
          <div >
            <div >התחברות</div>
          </div>
          <p >עוד לא הצטרפתם אלינו? לחצו כאן</p>
        </div>
        <img  src="{% static 'images/img/illu.svg' %}" alt="illustration 1" />
      </div>
    </div>
  </div>
</div>

Could someone please help me make the entire thing fit my screen? What happens now is that the screen has a scrollbar, and you have to scroll to see some of the elements. I want everything to fit in my screen, or any resolution for that matter. In other words, I want the entire thing to "shrink" and fit in any given desktop resolution (not even mobile, just desktop)

Would very much appreciate any help!

Thank you!

CodePudding user response：

I also had this problem, but it doesn't seem there's a quick built-in solution. Web pages need to accommodate many devices and screens, and scrolling is just something all device are used to do.

Some solutions that may help you tho:
Font scaling based on size of container
How to change text (not font size) according to screen size in CSS?
https://www.w3schools.com/howto/howto_css_responsive_text.asp

CodePudding user response：

You may want to read about CSS grid. Simplifies this kind of thing https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout