Responsive DIY Template Default for v1.5.x

[rbarbour]

Hi Raymond

Just a newbie question, How does the browser or phone know what size the screen is or is this done in a dynamic environment.

The traditional (HTML TABLES) that stock Zen Cart uses is converted to (DIV's) only in 1 file, the tpl_main_page.php

By using (DIV's) we are able to use CSS to control the widths of the (3) main columns, the left column, the center column and the right column.

CSS media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device (width of device) the site is being displayed on and all expressions in the media query are true.

To fully understand I recommend taking 5 minutes to Google "css media queries".

I also include the meta name=viewport in the html_header.php file to help with the width resizing based on width of device.

To fully understand I recommend taking 5 minutes to Google "viewport meta tag".

I only suggest doing research because it will help you understand how the content on your website is moved around, re-sized and changed about.

also do you need to do a new site/store.

The code provided has been proven to work on existing templates, simply merging the code shouldn't affect your templates current layout.

Running the sql file adds an ADMIN configuration to activate (convert) the HTML Tables to DIV's

Some sites will convert easier than others, this depends allot on the (APPEARANCE) modules installed, any added fixed widths set in your stylesheet or hard coded in your PHP files.

I recommend coping your site to a sub folder and testing that way.

Thankyou for the contribution.
Peter

Your most welcome!

[frank18]

How would one go about limiting the max width of the store display but retain responsive shrinking of the total width?

Reason for this question is that I have a 1600-something wide monitor which makes the store look too stretched. In fact, it looks quite funny when fully extended

Cheers / Frank

[rbarbour]

How would one go about limiting the max width of the store display but retain responsive shrinking of the total width?

By using the available media queries within the responsive.css file.

find towards the bottom of that css file:
@media (min-width:1200px){.row{margin-left:-5px;*zoom:1;}

.onerow-fluid controls the wrapper around the left, center and right column. However my code will only allow one to alter the code greater than 1200px (currently). More media queries can always be added

find:
.onerow-fluid{width:100%;*zoom:1;}

change to:
.onerow-fluid{width:1200px;*zoom:1;}

this should prevent that wrapper from extending past 1200px

to further customize, you may want to also stop your header and footer from extending past 1200px, to do this you would have to add right below .onerow-fluid{width:1200px;*zoom:1;}:

div#headerWrapper,div#navSuppWrapper{width:1200px;} /*stock Zen Cart Classes/ID's*/

Reason for this question is that I have a 1600-something wide monitor which makes the store look too stretched. In fact, it looks quite funny when fully extended

Cheers / Frank

I bet it does!

[frank18]

By using the available media queries within the responsive.css file.

find towards the bottom of that css file:
@media (min-width:1200px){.row{margin-left:-5px;*zoom:1;}

.onerow-fluid controls the wrapper around the left, center and right column. However my code will only allow one to alter the code greater than 1200px (currently). More media queries can always be added

find:
.onerow-fluid{width:100%;*zoom:1;}

change to:
.onerow-fluid{width:1200px;*zoom:1;}

this should prevent that wrapper from extending past 1200px

to further customize, you may want to also stop your header and footer from extending past 1200px, to do this you would have to add right below .onerow-fluid{width:1200px;*zoom:1;}:

div#headerWrapper,div#navSuppWrapper{width:1200px;} /*stock Zen Cart Classes/ID's*/



I bet it does!

Too easy... thanks for the hints, makes perfect sense (what else )

Cheers / Frank

[rbarbour]

Too easy... thanks for the hints, makes perfect sense (what else )

Cheers / Frank

Q. You using the code to convert existing template or to create a new one?

[frank18]

Q. You using the code to convert existing template or to create a new one?

A. neither - just curious for future reference, need to know what to do when the time comes to convert an existing template

Great work as always - thanks a mile!

[rbarbour]

A. neither - just curious for future reference, need to know what to do when the time comes to convert an existing template

Great work as always - thanks a mile!

Keep me posted, still awaiting some feedback, thanks and your welcome!

[uswebworx]

A DEMO of what to expect can be found @ http://www[.]zcadditions[.]com/responsive_default/

404 NOT found demo!

[rbarbour]

404 NOT found demo!

The DEMOS will be back up by days end, just doing some internal upgrades.

[dw08gm]

1. Where are the .offset css classes used?

2. I see your /common/tpl_main_page.php retains the original table structure for its layout, whereas if the table layout was converted into divs and a fluid design approach adopted (see attached), much of the responsive code could be removed.

In my example,

• column left floats left with width prescribed in %
• column right floats right with width prescribed in %
• centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.