• H2GD Part 30: Responsive Web Design with oik-rwd

    It wasn’t on my list ( H2GD Part 25: 15 projects for #wcukretreat 2013 ) but at the end of June, just before the #wcukretreat I started mapping out some ideas for dynamically generating CSS class definitions for block widths and heights. I’ve developed my first prototype of the code, as a new WordPress plugin called oik-rwd. I decided to test it on this site, with a simple change to the home page. But there were a couple of problems.

    Sidebar width problems

    I had this problem on oik-plugins and it was still present with my Artisteer v3.1 theme on this site. As the window width narrows so did the content, with the sidebar staying on the right. But when the window width was increased again the sidebar width grew at the same rate as the main content. The 80/20 ratio was not being maintained. Refreshing the screen resolved the problem. This meant that the problem lay in the media query CSS changes. I resolved the problem on oik-plugins.com by coding some custom CSS in a custom.css file.

    As you can see, I’ve also resolved the problem here on this post using my bw_css shortcode from oik-css

    @media screen and ( min-width: 790px ) {
      .art-content-layout { table-layout: auto; }
      .art-content-layout-row { display: table-row; }
      .art-content { width: 70%; }
      .art-content-layout .art-sidebar1 { width: 30%; }  

    Sidebar not dropping below main content early enough

    Although it worked fine on an iPhone 4s in either landscape or portrait orientation the desired effect occurred too late on a desktop window being sized down.

    I wanted the sidebar to drop down below the main content earlier, but because the mapping logic for different window sizes works on the full window width the main content appeared to be shrinking too quickly.

    I used the following additional CSS to make the sidebar drop below the main content at a width of 768 pixels.

    @media screen and ( max-width: 790px ) {
     .art-content { width: 100%; }
     .art-content-layout .art-sidebar1 { clear:both; width: 100%;}
     .art-content-layout-row { display: block; }


    Last updated:

    August 18, 2014


Tide times from tidetimes.co.uk

Tide Times & Heights for Langstone Harbour on
Tuesday, 07 December 2021
High Tide:01:09 ( 4.90m )
Low Tide:06:14 ( 0.90m )
High Tide:13:24 ( 4.80m )
Low Tide:18:38 ( 0.80m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
7th December 2021
01:22 High Tide ( 4.85m )
06:22 Low Tide ( 0.69m )
13:33 High Tide ( 4.83m )
18:48 Low Tide ( 0.57m )