Skip Navigation Bar

Divisional Branding Bar with Navigation and Header Specific Breadcrumbs Option

Responsive Images - Managing with TeamSite Components

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%

  • You see the image below fits to the full screen once the screen gets below 799 pixels wide.

Entrance to National Library of Medicine, Spring

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.

Entrance to National Library of Medicine, Spring

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.

Entrance to National Library of Medicine, Spring

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.

Entrance to National Library of Medicine, Spring

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.

Entrance to National Library of Medicine, Spring

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.

Entrance to National Library of Medicine, Spring