Responsive Social Media Links
The widget creates a block of links to the popular social media websites. There are eight of these plus a share by email link and a contact link. The icons are created using the FontAwsone stylesheet. They have a hover animation when the page is viewed on a computer and the links are stuck to the left of the browser at a fixed distance from the top so that they always remain in view. If they were left in this position when the page is viewed on a mobile device like an iPad or iPhone, they would partially cover the content so, on these devices, the links become inline and position themselves at the bottom of the screen.
If viewing this page n a computer, reduce the browser width to see this change.
Each icon link has a checkbox to turn it on and a field for entering the URL to the appropriate social media page.
The links to social media sites will open in a new window when the page is viewed on computers to make it easier for visitors to return to the site after they have done their socialising.
The share by email link settings are shown in the screenshot. It has a field for a title. This will show on hover when the page is viewed on a computer. If the title is not required, leave it blank.
The next box is for the text that will appear as the email subject.
The box for the email content can have text and a link as shown in the example. Note that, although the link is not active in the email application, it will be when it is opened by the recipient.
The last link is configured to open an internal page and would normally be used for accessing the contact form. This also has a title attribute in case the icon doesn't convey the meaning to some visitors.
The widget appears on the page as a 42px square and the size should NOT be altered.
Select the widget and open the Metrics inspector to select "Allow free dragging". The widget can then be dragged out of the content area and into the browser background out of the way of the other items.
As links are added, they will break out of the box. This will sort itself out when the widget is made to stick by checking the "Fix Position" box in the widget settings.
The next control sets the distance of the links from the top of the browser or device window and should be at least enough to set it below the header on page load.
Enter the total number of links in the box provided. This is required for the widget to calculate the percentage width of each link tab in mobile mode so it is importamt to get it right!
Changes in layout in responsive designs are implemented using media queries.
The @media rule is used to enclose a block of CSS properties which are only true for a certain screen width. This means the browser width on computers and the device width on tablets and mobile phones.
There are a number of choices for the break point.
In this example the value is 1059px. This means that the links will change from vertical on the left to inline on the bottom when the browser or device width is below 1059px. This will allow the change to take place on an iPad in landscape mode. Since the maximum width setting of the content widget used on this page is 1000px, the vertical navigation will not overlap the content when the browser width is reduced.
If the maximum width of the content widget is set to 1100 or 1200 px, try the highest value for the break point and test it in the browser to see the result.