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

Html – Div doesn't occupy space in mobile

I have a div with three elements: input field, timer, reset button in desktop view all three elements are of the same height but when I view it on an iphone 12 mini specifically the timer and reset button shrink in height. When I tested its dimensions using chrome dev tools this issue didn’t come up

enter image description here

<div style={{ display: "flex", flexDirection: 'row', justifyContent: 'space-between', height: '8vh', alignItems: 'center', }}>
                    <input
                        type="text" autoCorrect="off" autoCapitalize="none"
                        ref={inputRef}
                        value={typedWord}
                        onChange={handleInputChange}
                        disabled={timer ? false : true}
                        autoFocus={true}
                    />
                    <div className="timer">
                        <span style={{
                            fontSize: 20, fontFamily: 'lexend', color: 'var(--text-color)',
                        }}>{timer}s</span>
                    </div>
                    <div className="reset" onClick={() => {
                        setRotated(!rotated);
                        resetTest();
                        setTypedChars([]);
                        setTest(false)
                    }}>
                        <FiRefreshCcw size={25} color={'var(--text-color)'} className={rotated ? 'icon rotate' : 'icon'} />
                    </div>
                </div>

input {
  background-color: var(--sub-alt-color);
  border: 1px solid var(--sub-color);
  color: var(--text-color);
  border-radius: 5px;
  padding-left: 20px;
  width: 65.5%;
  max-width: 65.5%;
  min-height: 8vh;
  height: 8vh;
  font-size: 18px;
  outline: none;
  transition: border-color 0.3s ease;
}

.timer {
  width: 14.5%; display: flex; user-select: none; height: 8vh; min-height: 8vh; flex-shrink: 0; align-items: center; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
}
.reset {
  width: 14.5%; display: flex; height: 8vh; align-items: center; min-height: 8vh; flex-shrink: 0; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
  cursor: pointer;
}
Tags:

2

Answers


  1. 0

    The issue related to the iPhone 12 Mini’s scaller screen size and potentially how it handles the vh unit. You know, vh unit refers to the viewport height and on mobile devices, the viewport height can behave a little differently due t the address bar of browser and safe area insets. To solve the issue, I think you can use px instead of vh.

    I provide updated code.

    input {
  background-color: var(--sub-alt-color);
  border: 1px solid var(--sub-color);
  color: var(--text-color);
  border-radius: 5px;
  padding-left: 20px;
  width: 65.5%;
  max-width: 65.5%;
  min-height: 60px; // Changed vh to px
  height: 60px; // Changed vh to px
  font-size: 18px;
  outline: none;
  transition: border-color 0.3s ease;
}

.timer {
  width: 14.5%;
  display: flex;
  user-select: none;
  height: 60px; // Changed vh to px
  min-height: 60px; // Changed vh to px
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--sub-alt-color);
  border-radius: 5px;
}
.reset {
  width: 14.5%;
  display: flex;
  height: 60px; // Changed vh to px
  align-items: center;
  min-height: 60px; // Changed vh to px
  flex-shrink: 0;
  justify-content: center;
  background-color: var(--sub-alt-color);
  border-radius: 5px;
  cursor: pointer;
}

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    the problem is the the height property u specify is set to the content height and there’s an additional 4px for the input (padding, border).

    you can fix that using one of the following solutions

    Solution 1:-

    just specify box-sizing mode in to your css code to specify the height set to whole element

    * {
  box-sizing: border-box;
}

    Solution 2 (not preferred though):-

    by using calc() in css u can specify the height to be:

    input {
   calc(8vh - 4px);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search