Add the following code to the page header to make the images responsive relative to the size of their parent div tag.
<style type="text/css">
#body img {width: 100%;}
</style>
Examples
- Left Column Width 25%
- Left Column Width 33%
- Left Column Width 50%
- Left Column Width 66%
- Left Column Width 75%
- Basic Image Without Any Width Attributes - Single Generic Column
Left Column Width 25%
- You see the image below fits to the full screen once the screen gets below 799 pixels wide.
Right Column Width 75%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at pede nec turpis scelerisque porta. Nullam leo odio, volutpat ac, imperdiet at, sagittis eget, arcu. Nam eu nunc vel lorem varius vehicula. Donec ut nunc. Sed luctus, elit eget venenatis vehicula, tortor pede aliquet mi, a dignissim est erat eu nisi. Sed rutrum nibh vel elit. Donec tempor sodales ligula. Curabitur leo nisi, condimentum sit amet, eleifend quis, vulputate vitae, odio. Sed suscipit. Curabitur sit amet turpis at libero scelerisque dapibus. Curabitur laoreet.
Left Column Width 33%
- You see the image below fits to the full screen once the screen gets below 799 pixels wide.
Right Column Width 66%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at pede nec turpis scelerisque porta. Nullam leo odio, volutpat ac, imperdiet at, sagittis eget, arcu. Nam eu nunc vel lorem varius vehicula. Donec ut nunc. Sed luctus, elit eget venenatis vehicula, tortor pede aliquet mi, a dignissim est erat eu nisi. Sed rutrum nibh vel elit. Donec tempor sodales ligula. Curabitur leo nisi, condimentum sit amet, eleifend quis, vulputate vitae, odio. Sed suscipit. Curabitur sit amet turpis at libero scelerisque dapibus. Curabitur laoreet.
Left Column Width 50%
- You see the image below fits to the full screen once the screen gets below 799 pixels wide.
Right Column Width 50%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at pede nec turpis scelerisque porta. Nullam leo odio, volutpat ac, imperdiet at, sagittis eget, arcu. Nam eu nunc vel lorem varius vehicula. Donec ut nunc. Sed luctus, elit eget venenatis vehicula, tortor pede aliquet mi, a dignissim est erat eu nisi. Sed rutrum nibh vel elit. Donec tempor sodales ligula. Curabitur leo nisi, condimentum sit amet, eleifend quis, vulputate vitae, odio. Sed suscipit. Curabitur sit amet turpis at libero scelerisque dapibus. Curabitur laoreet.
Left Column Width 66%
- You see the image below fits to the full screen once the screen gets below 799 pixels wide.
Right Column Width 33%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at pede nec turpis scelerisque porta. Nullam leo odio, volutpat ac, imperdiet at, sagittis eget, arcu. Nam eu nunc vel lorem varius vehicula. Donec ut nunc. Sed luctus, elit eget venenatis vehicula, tortor pede aliquet mi, a dignissim est erat eu nisi. Sed rutrum nibh vel elit. Donec tempor sodales ligula. Curabitur leo nisi, condimentum sit amet, eleifend quis, vulputate vitae, odio. Sed suscipit. Curabitur sit amet turpis at libero scelerisque dapibus. Curabitur laoreet.
Left Column Width 75%
- You see the image below fits to the full screen once the screen gets below 799 pixels wide.
Right Column Width 25%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at pede nec turpis scelerisque porta. Nullam leo odio, volutpat ac, imperdiet at, sagittis eget, arcu. Nam eu nunc vel lorem varius vehicula. Donec ut nunc. Sed luctus, elit eget venenatis vehicula, tortor pede aliquet mi, a dignissim est erat eu nisi. Sed rutrum nibh vel elit. Donec tempor sodales ligula. Curabitur leo nisi, condimentum sit amet, eleifend quis, vulputate vitae, odio. Sed suscipit. Curabitur sit amet turpis at libero scelerisque dapibus. Curabitur laoreet.
Basic Image Without Any Width Attributes - Single Generic Column
- You see the image below fits to the full screen no matter which device you use.
Last Reviewed: October 27, 2015