Search code examples
javascriptjqueryhtmlcssbackground-position

div left responsive image fixed 100% height and div right text scrollable

How to create a left div with responsive fixed image and a right div with scrollable text if text is bigger than screen. When you resize the page, only the right div change and go under the left div when the screen is less than 1024px for example

here is a screenshot who show what i'm looking for: http://www.500milligrammes.com/facticemagazine/final/fancy/brouillon2.jpg

Solution

  • You just need to add a media query to your css for restting your css properties to different values on particular widths like this:

    @media (max-width: 1024px){
    #left_side  {   
        width:100%;
    }
    #content{
        width:100%;
        position:static;
        margin: 0px;
    }
}

    Here is a jsfiddle with above code: http://jsfiddle.net/AndrewL32/d2b1jhxb/1/

    (Increase/decrease the output screen size to see it working)