Can I increase the margin-top in css based on how small I make my window?

Question

I want the space between my black div and the navbar to remain the same when I resize the window. I thought of resizing the margin-top as the window gets smaller but I do not know how to get window's current size and use it in css.

Photos:

Full sized window

Minimized window

Question.css

.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;

}

Question.js

import React from 'react'
import './Question.css'

class Question extends React.Component {
    render() {
        return (
            <div className='Question'>
                applications of adaptive testing, starting with Binet in 1905. Adaptive tests are comprised of items
            selected from a collection of items, known as an item bank. The items are chosen to match the
            estimated ability level (or aptitude level, etc.) of the current test-taker. If the test-taker succeeds on
            an item, a slightly more challenging item is presented next, and vice-versa.
            </div>
        )
    }
}

export default Question;

NavBar.css

.NavBar {
    background-color: #0B0C10;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 2px solid #C5C6C7;
    color: #C5C6C7;
}

.Title {
    margin-left: 5%;
}

NavBar.js

import React from 'react'
import './NavBar.css'

class NavBar extends React.Component {
    render() {
        return (
            <div className='NavBar'>
                <h3 className='Title'>CATlin</h3>
            </div>
        )
    }
}

export default NavBar;

Thank you in advance!

I saw this regarding keeping track of current window size https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution — fatiu, Apr 01 '21 at 21:20
Hi. I don't believe you've provided sufficient information to answer your question. Consider posting the relevant CSS to give more context. — oglester, Apr 01 '21 at 21:23
Sorry, just added code right now. Thanks for pointing that out — rardav, Apr 01 '21 at 21:28

Fakt309 · Accepted Answer · 2021-04-01T21:33:33.837

0

.Question {
  background-color: #0B0C10;
  margin: 2% 5% 3% 5%;
  padding: 4%;
  color: #C5C6C7;
}

@media screen and (max-width: 600px) {
  .Question {
    margin: 4% 5% 3% 5%;
  }
}

edited Apr 01 '21 at 21:33

answered Apr 01 '21 at 21:25

Fakt309

821
5
14

if you use `max-width: 600px` you have to use `min-width: 601px` otherwise at 600px both rules apply and it will come down to specificty weight. – tacoshy Apr 01 '21 at 21:29
This just did it. Thanks! – rardav Apr 01 '21 at 21:42

score 0 · Answer 2 · answered Apr 01 '21 at 21:31

0

Yes, you can. "vh" is percentage of your screen height. (Also, vw: percentage of your screen width.) Please, review and run my code and resize your screen height.

.container {
  margin-top: 50vh;
  height: 100vh;
  width: 100vw;
  background-color: #ecf0f1;
}

<div class="container"></div>

answered Apr 01 '21 at 21:31

AfifeBetul

136
6

This seems like a great solution but in full sized, it makes the gap seem extraordinarily large. – rardav Apr 01 '21 at 21:41

score 0 · Answer 3 · answered Apr 01 '21 at 21:32

0

If you want something more smoothly you must do this without media queries using only vw and vh units.

.foo {
   margin-top: 10vw; /* the margin top will be 10% of window width */
}

.bar {
   margin-top: 10vh; /* the margin top will be 10% of window height */
}

answered Apr 01 '21 at 21:32

Alecell

568
6
19

This seems like a great solution but in full sized, it makes the gap seem extraordinarily large. – rardav Apr 01 '21 at 21:41

Can I increase the margin-top in css based on how small I make my window?

3 Answers3