Responsive Content

I am using the twitter bootstrap grid system and am quite new to it, so bear with me.

In the slideshow I have two columns, one that contains the image of the macbook and the other one that contains the description.

As I make the browser smaller the text “squashes” against the image of the macbook, now I have set the padding and margins of this text so it doesn’t appear right next to the macbook image, but this doesn’t stay when the window is reduced in size.

Is there any code I can input that would stop this from happening?

Thanks in advance

You set a 130px on .macbook which means that as the screen gets smaller and that container that holds the image…it might only be 515px and the image is 460px wide. 460+130 = 590 and the container is only 515 (in this example - obviously it varies as the screen gets smaller/bigger)

As a result of 590(image width+margin)>515(container width), it pushes out of the container

Right Ok I understand now, have changed this and centered the image and got rid of the margin

Right - the page now looks good so I consider this done. I don’t see any overlap anymore. Good job.

Yep all sorted, you’ve helped me a couple of times now- really appreciate it

Can close the thread now

Your wish is my command.