Search code examples
csshtmlscale

How to create responsive DIV

Can anyone help me to write some CSS code, so my accordion will be responsive and stay in the same place just like on a screenshot below:

enter image description here

My image is already have "scale-with-grid" tag, so the only thing left to do is to make accordion div fit under it.

Site link here

Solution

  • On your div column one-second you need to overide the skelton.css width set.

    You can use a selector like .container div.one-second, I think it will do the job.

    the use percent value, example :

    .container div.one-second{
    width : 50%;
    margin-left : 50%;
}

    That will make you cell width usin 50% of the page with the left border positionned at 50% (middle) of you page. Adjust those value depending on your image.

    In theories, the margin-left value should be equal to the portion the girl arm is taking.