Responsive Content Code Widget

The widget is for creating responsive pages with a lot of content. It creates all the basic styles and allows them to be adjusted in the widget settings. Reduce the browser width to see the responsive action.
The code is entered into the box and all the basic HTML elements are shown further down the page.
HTML headings are used to denote the descending importance of the headings. This is the first full width paragraph preceeded by the h1 heading. The heading is an h1 because it is the first one inside an HTML5 container.
<h2>Is used for section headings where the theme or subject changes and <h3> for paragraph or sub headings.
If there are no changes in theme, use <h2> for sub headings.

Red Image

Image Text Wrap

The image has a class name "imgLeft" which floats it left. It has a percentage width which makes it responsive. When the image width is less than 100%, the text and the heading float up beside it and wrap around the bottom if there is enough of it.
The media queries in the styles allow the images to become full width when viewed on the narrow screen of a mobile phone in portrait mode.

Clearing Floats

This full width text and its heading are preceeded by a clearfix to stop it floating up to the right of the image.


Line & Theme Breaks

The line break <br> is mainly used to create returns but can also be used to space out items vertically.
The theme break <hr> creates a horizontal line and also indicates a change in theme or subject to the search engines.
In the example below, the <hr> is followed by an <h2> heading since it introduces a new subject,




Section Heading

Special Characters

Text in HTML requires the use of the character codes. The most common ones are …

& ampersand - &amp;
" double quote - &quot;
< back arrow - &lt;
> forward arrow - &gt;
© copyright - &copy;
@ at symbol - &#64;
… horizontal ellipsis - &hellip;


Inline Styles

The <img> tags in the code have their width set using inline CSS like this …
style="width:50%"
This allows the individual images to have their width adjusted to suit the layout.
Any element can have extra styles added using inline CSS. Here are some examples …
span - <span style="color:#0000FF;font-style:italic">span</span>
highlight text - <mark style="padding:2px 5px;background:#FF0000;color:#FFFFFF">highlight text</mark>


Links

Links have the file path entered into the href attribute and can also have a title attribute. Text entered into the title will show when the link is hovered.
This Link has a title attribute and opens in a new window.
The target attribute decides how the linked page will open.
target="_self" opens in the same window
target="_blank" opens in a new window
target="_top" allows a link in an iframe to break out of the frame and open in a full size browser window
If there is no target atribute, the linked page will open in the same window.


Code

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Sub Heading</h3>
<p>Paragraph</p>
<a href="#" title="Title On Hover" target="_blank">Link Text</a>
<div class="clearfix"</div>
<hr>
<img class="imgLeft" src="image-left.jpg" alt="Red Image" style="width:50%">
<img class="imgCenter" src="image-center.jpg" alt="Blue Image" style="width:60%">
<img class="imgRight" src="image-right.jpg" alt="Green Image" style="width:50%">

Centered Image

Blue Image

This image is centered in the container and has a percentage width setting. It becomes full width when viewed on mobile phones in portrait mode.



Green Image

Right Image

The image has a class name "imgRight" which floats it right.

Footer

This is the last <h3> heading and full width paragraph which are preceeded by a clearfix.
They are followed by the built in footer which has a field for the © info, auto update of the copright year and a smooth scroll to the top function.

© EverWeb Widgets -

EverWeb Widgets