Pagename: programming - Programming
Post Count: 5Category:html - css & js related
Pagename: programming - Programming

CSS – Responsive design details

This site:
Recommends these breakpoints…

Using Hardware Pixels to Design a Responsive Website
When designing a responsive website, we suggest you use 3 different sizes: 1) For a regular desktop, use the width of 1200 pixels, 2) for an iPad the format is 768 x 1024 pixels and 3) for an iPhone 5 the format is 320 x 568 pixels. Why these 3 formats? Simple, because a 1920 x 1080 is the most common HD desktop size, the regular size iPad is a common tablet size and the iPhone 5 is the smallest size you should be designing for. But in fact, you are actually designing for 5 formats when you consider that a mobile device can be used either vertically or horizontally.


– from:

Absolute Lengths

– Avoid these as they lack adjustment with changing screen size

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)


Relative Lengths

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the “0” (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport’s* smaller dimension
vmax Relative to 1% of viewport’s* larger dimension
% Relative to the parent element

– Relative units (as listed above) are the most useful in responsive design. ‘rem’ in particular is popular as it is relative to the root font size. A popular approach is to set the font size for the ‘html’ tag to 62.5% (ie

 html{ font-size:62.5%; }

) which changes the default of 16px to 10px and this simplifies any ratios where rem is to be used (ie font-size of 16px would be achieved by using:

font-size: 1.6rem;


Media Query Syntax


@media not|only mediatype and (expressions) {

You can also have different stylesheets for different media:

<link rel=”stylesheet” media=”mediatype and|not|only (expressions)”

Leave a Reply

Your email address will not be published. Required fields are marked *

Pagename: programming - Programming

WordPress – Merge wp_postmeta table (local version with online)

When extra information is required to be stored for a specific record in ‘wp_posts’, it can be stored in the ‘wp_postmeta’ table. One such bit of information is when an attached image is to be used as the site-icon. I realised this when I added an icon (ie a favicon) to a local version of my site only to not see it not show up when I uploaded the files to the online version. I had updated the wp_post table but this also did not rectify the situation. The wp_postmeta table specifies that the image is to be used as the site icon.

I wasn’t sure how well the online data would match with my local version so I did some checks which I describe here for reference:

1. wp_postmeta was exported to local drive and a temporary copy was made (called wp_postmetab).

2. Next I did some exploration. I did a union of both tables and grouped them. In this case, most records matched with the exception of ‘_edit_lock’ field. This made sense as it would change when a post was opened and updated. In this case, I was able to delete the ‘_edit_lock’ records in 1 table and use those from the other table.
Using the query shown below, I looked for ‘counts’ of 1 which would indicate either unique entries or non-matching entries. I was ignoring ‘meta_id’ as it is not used/recorded elsewhere as far as I have been able to determine (this site details that:
Cases where a unique value existed in either table would just be added to the merged table. If the information is needed, it will be there and if not, no big deal that it is there.

For clarity, the query below produces a union of two tables with extra columns to show when records are grouped and which database/table the record(s) come from.

SELECT Count(*) as cnt, SUM(DB1) as Sum1, SUM(DB2) as Sum2, UN.* FROM
   SELECT 1 as DB1, 0 as DB2, pm.* FROM DB_Name.wp_postmeta as pm
   SELECT 0 as DB1, 1 as DB2, pmb.* FROM DB_Name.wp_postmetab as pmb
) UN
GROUP BY post_id, meta_key, meta_value;

3. For those cases where post_id and meta_key matched but meta_value did not, a decision had to be made for each record. I created a copy of the combined tables without the ‘meta_id’ column (this column was added after). Using ‘UNION’ rather than ‘UNION ALL’ keeps distinct values only. I compared against the previous temporary table for those records that needed to be deleted or amended.

SELECT post_id, meta_key, meta_value FROM DB_Name.wp_postmeta as pm
SELECT post_id, meta_key, meta_value FROM DB_Name.wp_postmetab as pmb;

ADD meta_id bigint(20) unsigned AUTO_INCREMENT PRIMARY KEY FIRST;

4. Once TempPostMeta table was considered a suitable replacement I truncated the data in the wp_postmeta and replaced with the data from TempPostMeta table.

TRUNCATE TABLE DB_Name.wp_postmeta;

INSERT INTO DB_Name.wp_postmeta(meta_id, post_id, meta_key, meta_value)
SELECT meta_id, post_id, meta_key, meta_value from DB_Name.TempPostMeta;

5. I then did the same steps to add the data to the online version and tested which found everything to be working as it should be.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pagename: programming - Programming

R – Reference environment & settings commands

A list of commands I have used in R for information about the environment or general settings.

  • Version info: R.Version()
  • Clear the terminal console: cat(“\014”) – In effect, this sends the ‘Ctrl L’  keystroke to the console
  • Workspace info:
    •   Show the current workspace: getwd()
    •   Set the workspace to use: setwd(‘folder path goes here…’)


Leave a Reply

Your email address will not be published. Required fields are marked *

Pagename: programming - Programming

WordPress – Links (Reference…)

Useful links:

Creating custom tables in wordpress
Clear example of adding ‘custom table’ to wordpress database
Guide to flexboxes
Easy to follow example of flexbox CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Pagename: programming - Programming

WordPress – Google Analytics (ga) tracking code as a plugin

For wordpress sites I build, I insert the google analytics (ga) tracking code into the html head section via a plugin. The code for this is shown below. Alternatively, it is relatively easy to slip the tracking code directly into the ‘header(s)’ template (Located:\wp-content\themes\active-theme\header.php) as described by google analytics on the ‘tracking-code’ page. However, I prefer the ‘cleaner’ approach of separating the code into a separate file. So much easier to read if it is ever required…

I also use the WordPress function ‘is_user_logged_in’ to remove most of my visits to the site as I am typically signed in to my WP admin account.

Here is the code:

	Plugin Name: Site-Name Google Analytics Plugin
	Plugin URI: http://--relevant url?
	Description: Adds the Google analytics tracking code to ... Site-Name
	Author: Author name
	Version: 1.0
	Do not insert tracking code if the user is logged in (ie internal traffic) 
	This is wrapped in a function (insert_ga_tracking() ) so it can 
	be loaded with the 'init' hook. An error can be produced otherwise...

	function insert_ga_tracking()
		if ( ! is_user_logged_in() )
			add_action( 'wp_head', 'Site-Name_google_analytics', 10 ); 
			function Site-Name_google_analytics() 
				<!-- Global site tag (gtag.js) - Google Analytics -->
				<script async src="">
				  window.dataLayer = window.dataLayer || [];
				  function gtag(){dataLayer.push(arguments);}
				  gtag('js', new Date());

				  gtag('config', 'UA-12345678-1');

	add_action('init', 'insert_ga_tracking');

To use this code…

Create a php file in the folder location: Site-Name/wp-content/plugins/ and add the script above to this file.

The tracking code between the double quotation marks on line 25 needs the tracking code supplied by google for your site (located in the admin/tracking for your google analytics property).
‘Site-Name’ in the code above can be changed to the target site or removed (in all four locations…). I add the site name as a check to ensure the right tracking code goes to the right site location.

Then, in the WP Admin dashboard, go to ‘installed plugins’ and activate the plugin which should be displayed with the name you specified ‘Plugin name’.

That should be all there is to it but don’t forget to test it using google analytic’s testing feature.

Leave a Reply

Your email address will not be published. Required fields are marked *