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

Html – How to remove styling if the heght of the screen less than the element height

I have centered the element by the height of the screen using absolute positioning.
However, when the height of the screen is less than the element width, it is cutting the part of the element making its top unreachable. How can I add and remove styling if the height of the screen is less than the height of the element?

https://codepen.io/alena-chuyankova/pen/YzmWYKZ


.wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-color: white;
    gap: 1rem;
    width: 45%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    
}
Tags:

2

Answers


  1. 0

    Using the CSS3 @Media, you can achieve any responsive condition; for this case, I suggest using the aspect-ratio

    //width >= height
@media (min-aspect-ratio: 1/1) { 
     .wrap{
         //your CSS here
     }
}

//Or width <= height
@media (max-aspect-ratio: 1/1) { 
     .wrap{
         //your CSS here
     }
}

    This way you can create conditions for the CSS to be responsive to the situation.

    For more options, I recommend reading MDN (since I feel like W3Schools are lacking examples)

    Edit: I moved the comments // because they can’t be inside the @media

    Login or Signup to reply.
  2. 0

    The strictly answer I can make to your question is this snippet below:

    // Listening to the events in the case the display frame changes...
// With a custom listener:
window.addEventListener('resize', customListener);
document.addEventListener('readystatechange', customListener);
// Without a custom listener:
window.addEventListener('deviceorientation', updateAllContainerMeasurements);
window.addEventListener('deviceorientationabsolute', updateAllContainerMeasurements);

// Just an example of a custom listener.
function customListener ()
{
  // Updating multiple classes.
  updateAllContainerMeasurements({classList: 'myContainer;myOtherContainer'});
  updateAllContainerMeasurements({classList: ['myContainer', 'myOtherContainer']});
  
  // Updating different reduced class than default configuration.
  updateAllContainerMeasurements({reducedClass: 'minimizeContainer'});
};

// The default listener.
function updateAllContainerMeasurements ( theConfiguration )
{
  theConfiguration =
  {
    classList: ['myContainer'],
    reducedClass: 'myReducedContainer',
    
    // Replace the defaults with what's given in the parameter.
    ... Object(theConfiguration)
  };
  
  if ( ! Array.isArray(theConfiguration.classList) )
  {
    theConfiguration.classList =
    (
      String(theConfiguration.classList)
        .replaceAll(';', ' ')
        .replaceAll(',', ' ')
        .split(' ')
    );
  }
  
  for ( const elementClass of theConfiguration.classList )
  {
    // Select your element.
    const allElements = document.querySelectorAll('.' + elementClass.trim());
    
    for ( const theElement of allElements )
    {
      // Saves the original element measurements in itself.
      if ( ! theElement.classList.contains(theConfiguration.reducedClass) )
      {
        theElement.originalMeasurement = theElement.getBoundingClientRect();
      }
      
      // Always verify against the original element measurements.
      if ( window.innerHeight < theElement.originalMeasurement.height )
      {
        if ( ! theElement.classList.contains(theConfiguration.reducedClass) )
        {
          theElement.classList.add(theConfiguration.reducedClass);
        }
      }
      
      else if ( theElement.classList.contains(theConfiguration.reducedClass) )
      {
        theElement.classList.remove(theConfiguration.reducedClass);
      }
    }
  }
}
    .myContainer
{
  width: 600px;
  height: 600px;
  
  background-color: lightblue;
  border: 1px solid darkblue;
}

.minimizeContainer
{
  width: 100px;
  height: 100px;
  
  background-color: red;
  border: 1px solid darkred;
}
    <div class="myContainer"></div>

    Try running the snippet, open Full Page then try resizing the display frame through the Dev Tools.

    NOTE: The listener is only observing the height.

    EDIT: I did some changes to the snippet:

    1. Adjusted the default listener to observe multiple classes.

    1.1. theConfiguration.classList accepts an array with element classes to observe or a string like 'class1,class2;class3 class4'.

    1. Added an example of how to listen with a custom listener.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search