Gregory's Blog

Responsive Web Design

I am spending quite a bit of time making the new blog responsive. My goal is to make the mobile site fully functional and to make it look as nice as the application on the web. I ran into some major hurdles.

For example, the original code formatter, developed by Jason Delmore, expanded beyond the mobile device size. I re-wrote quite a bit of the logic in the formatter, but I did not want to re-write the core logic that provides the formatted code and lines. I had wanted to re-write every inner div and span that used position: absolute underneath the constraining parent div that had position, relative, but gave up as there were so many div's and spans. There is so much logic in the formatter that I gave up thinking about making the code responsive and instead I constrained the content like so:

CSS:

view plain about
1/* The constrainer table will constrain one or many different div's and spans to a certain size. It is handy to use when you are trying to contain the size of elements created by an older libary that does not use responsive design. */
2#constrainerTable {
3    /* The parent element (this table) should be positioned relatively. */
4    position: relative;
5    /* Use the root width var */
6    width: var(--contentWidth);
7    /* Now that the parent element has a width setting, make sure that the width does not ever exceed this */
8    max-width: 100%;
9}    
10        
11/* Helper function to the constrainerTable to break the text when it exceeds the table dimensions */
12#constrainerTable .constrainContent {
13    max-width: 100%
14}
15th {
16    max-width: var(--contentWidth);
17}
18td {
19    word-break: break-word;
20    min-width: 50px;
21}

And the HTML:

view plain about
1<!-- Post content -->
2<!--- Note: Delmore's code formatter is not mobile friendly and it does not use responsive design. This table will constrain the content to a certain variable size. --->
3<table id="constrainerTable" class="constrainContent">
4    <tr>
5        <td>
6            <!--- Blog post. --->
7            #application.blog.renderEntry(body,false,enclosure)#                
8        </td>
9    </tr>
10</table>

Fixed background image settings for mobile devices: To use a fixed background, the main arguments here are display: block, position: fixed, z-index:-10

view plain about
1body:before {
2    content: "";
3    display: block;
4    position: fixed;
5    left: 0;
6    top: 0;
7    width: 100%;
8    height: 100%;
9    z-index: -10;
10    background: url(<cfoutput>#blogBackgroundImage#</cfoutput>) no-repeat center center;
11    -webkit-background-size: cover;
12    -moz-background-size: cover;
13    -o-background-size: cover;
14    background-size: cover;
15}

Opacity settings for mobile devices: The web application has a nice opacity effect where the theme's background image bleeds through into the interface. To accomplish the same effect for iOs devices, I used: opacity: .92 and visibility: true.

view plain about
1/* Opacity for iOs */
2opacity: 0.<cfoutput>#siteOpacity#</cfoutput>;
3visibility: visible;

This entry was posted on February 12, 2019 at 4:01 PM and has received 41 views.

There are currently 0 comments.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.01 June 13, 2019 00:49 PST.