CODEWITHSUNDEEP
cssresponsive-designvertical-alignment
Ben Racicot
Ben Racicot

Reputation: 5905

vertically centering things in responsive divs

I have a background image that I'm maintaining its aspect ratio like so (see fiddle):

.wrapper{
    width: 100%;
    max-width: 703px;
}

.greeting {
    background-image: url('ANIV_ARG_CELEB.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    background-position:left;
    position: relative;
        min-width: 300px;
        min-height: 300px;
        width: 100%;
        padding: 34.6% 0 0 0;
}


<div class="wrapper">
     <div class="greeting texttop" style="background-image: url('top/ANIV_BOW.jpg');">
          <div class="message">
               <form action="" method="post">
                    <textarea name="text"></textarea>
                </form>
           </div>
      </div>
</div>

This works great only now I'm trying to place a textbox within the div so that it stays at the top of the image on all devices.

This setup works well for mobile, placing the textbox at the top, however as the screen size grows the textbox becomes lower and lower.

Perhaps this can't be done in a fluid form and needs media queries?

Upvotes: 1

Views: 50

Answers (1)

Mr_Green
Mr_Green

Reputation: 41832

If I understood correctly, you are trying to move the textbox in relative to the image position. The image can be transformed to Landscape or portrait based on vertical or horizontal resize of the window. This is not possible using just css. This can be solved using javascript if you know the dimensions of the Image.

In your case, the image dimensions are 774 X 543. So, here is the solution for that:

Javascript

$(function () {
    var w = 774;
    var h = 543;

    function setMessageBox() {
        var greeting = $('.greeting');
        var height = greeting.height();
        var width = greeting.width();
        console.log(height);
        if (width > (w / h) * height) {
            $('.greeting.texttop .message').css('top', '0px');
        } else {
            var vHeight = (h * width) / w;
            var topSpace = (height - vHeight) / 2;
            $('.greeting.texttop .message').css('top', topSpace.toFixed(2) + 'px');
        }
    }
    setMessageBox();
    window.onresize = setMessageBox;
});

Working Fiddle

Upvotes: 2

Related Questions