BETA feedback for Responsive-Classic in v155-beta

[dbltoe]

Kudos to all It's great to see things moving the way they are.

I have just a few things to suggest you take a look at. The new extension for chrome browser (Responsive Web Design Tester ) allows me to see the code better than anything I've found before. What I see as a minor problem in regular mode has to do with the product info settings in three stylesheets. #pinfo-right and #cart-box or the two IDs that start us down the road to change.

It all starts with a difference in the stylesheet between the two IDs, their width, and their padding. The standard stylesheet.css shows around line 344

#pinfo-right{float:right;width:55%;padding:20px 0 0 0;} 

The problem is that this setting doesn't allow the #pinfo-right to follow the #cart-box properly. My fix is to change the line 344 code to

#pinfo-right{float:right;width:52.5%;padding:1em;} 

This makes the two play well together with the desktop/laptop view.

However, now that we've messed with the stylesheet.css, it requires that the responsive_mobile and responsive_tablet stylesheets be modified next. Otherwise, we get some strange looks.

First the responsive_mobile.
Lines 143 and 144

#cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
#pinfo-right{float:left;width:49%;} 

get change to

#cart-box{width:49%;float:right;margin-bottom:2em;}
#pinfo-right{float:right;width:49%;} 

Lines 371 and 372

#cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
#pinfo-right{width:100%;} 

get changed to

#cart-box{padding:15px 0;margin-bottom:2em;}
#pinfo-right{padding: 15px 0;} 

This fixes both the landscape and portrait "look" for mobile phones.

Then comes responsive_tablet.
Line 74

#cart-box{width:51.5%;} 

becomes

/*#cart-box{width:51.5%;}*/ 

commenting out the un-required call.
Lines230-235

#pinfo-right{float:left;width:49%;}
#pinfo-left{float:none;}
#pinfo-left{width:100%;}
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
#cart-box{padding:15px 0;margin-bottom:30px;} 

are changed to

#pinfo-right{float:right;width:50%;}
/*#pinfo-left{float:none;}
#pinfo-left{width:100%;}*/
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
/*#cart-box{padding:15px 0;margin-bottom:30px;}*/ 

as a lot of the portrait calls were repeats of or in opposition to other stylesheet calls.

This may look like at lot was incorrect BUT, truth was that the original calls in the stylesheet.css caused the "trickle-down" glitches.

Hope this helps someone out there. Sure is easier to work with changes with the way it's set up in 1.5.5!

[picaflor-azul]

Kudos to all It's great to see things moving the way they are.

I have just a few things to suggest you take a look at. The new extension for chrome browser (Responsive Web Design Tester ) allows me to see the code better than anything I've found before. What I see as a minor problem in regular mode has to do with the product info settings in three stylesheets. #pinfo-right and #cart-box or the two IDs that start us down the road to change.

It all starts with a difference in the stylesheet between the two IDs, their width, and their padding. The standard stylesheet.css shows around line 344

#pinfo-right{float:right;width:55%;padding:20px 0 0 0;} 

The problem is that this setting doesn't allow the #pinfo-right to follow the #cart-box properly. My fix is to change the line 344 code to

#pinfo-right{float:right;width:52.5%;padding:1em;} 

This makes the two play well together with the desktop/laptop view.

However, now that we've messed with the stylesheet.css, it requires that the responsive_mobile and responsive_tablet stylesheets be modified next. Otherwise, we get some strange looks.

First the responsive_mobile.
Lines 143 and 144

#cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
#pinfo-right{float:left;width:49%;} 

get change to

#cart-box{width:49%;float:right;margin-bottom:2em;}
#pinfo-right{float:right;width:49%;} 

Lines 371 and 372

#cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
#pinfo-right{width:100%;} 

get changed to

#cart-box{padding:15px 0;margin-bottom:2em;}
#pinfo-right{padding: 15px 0;} 

This fixes both the landscape and portrait "look" for mobile phones.

Then comes responsive_tablet.
Line 74

#cart-box{width:51.5%;} 

becomes

/*#cart-box{width:51.5%;}*/ 

commenting out the un-required call.
Lines230-235

#pinfo-right{float:left;width:49%;}
#pinfo-left{float:none;}
#pinfo-left{width:100%;}
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
#cart-box{padding:15px 0;margin-bottom:30px;} 

are changed to

#pinfo-right{float:right;width:50%;}
/*#pinfo-left{float:none;}
#pinfo-left{width:100%;}*/
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
/*#cart-box{padding:15px 0;margin-bottom:30px;}*/ 

as a lot of the portrait calls were repeats of or in opposition to other stylesheet calls.

This may look like at lot was incorrect BUT, truth was that the original calls in the stylesheet.css caused the "trickle-down" glitches.

Hope this helps someone out there. Sure is easier to work with changes with the way it's set up in 1.5.5!

Thank you for posting ;) I'll take a look and if all is well, get these changes included.

Thanks,

Anne

[dw08gm]

I find that when expressing widths as percentages, it sometimes pays to also express the horizontal components of padding and margin (and occasionally even border) as percentages.

[dbltoe]

I notice that the CSS_read_me.txt is not added to the responsive_classic css folder. Are there plans for some examples in the responsive_classic to show how to do these things in a responsive template?

[picaflor-azul]

I notice that the CSS_read_me.txt is not added to the responsive_classic css folder. Are there plans for some examples in the responsive_classic to show how to do these things in a responsive template?

What sort of examples would you like to see?

Thanks,

Anne

[dbltoe]

Sorry that I haven't had time to investigate this myself.
I was basically wondering if anyone out there has tested the effect of using any solution from the CSS_read_me.txt in a responsive setup. And, if so, what measures needed to be taken (if any) to maintain responsiveness. Does the responsive.css eliminate the need to add any responsive calls to a p_??.css driven page? Do we need a p_??_mobile.css and p_??_tablet.css with the responsive_classic template?
We don't have a test site or customer using any of these and we start our round of rodeos next week through mid- to late-April.
Even if nothing is needed, wouldn't it be beneficial to have the file there? With or without responsive-driven additions, knowledge is power.

[rbarbour]

This is the easiest answer I got!

All the responsive CSS files:

responsive.css
responsive_default.css
responsive_mobile.css
responsive_tablet.css

are loaded via the html_header so they get loaded on every page with the exception for the popup_image and popup_image_additional pages.

On Desktops the popup_image and popup_image_additional window will resize to the images full width, for tablet and mobile devices the page simply open in a new window.

The above responsive CSS files are loaded via the html_header so that they are loaded last and can override any and all rules within the normal stock CSS structure, so no, you do not need separate p_??.css, p_??_mobile.css and p_??_tablet.css files. Simply adding your css to manipulate elements on specific devices should be put in the responsive_default.css file and device specific responsive_mobile.css or responsive_tablet.css file.

I do agree, better documentation is needed.

Sorry that I haven't had time to investigate this myself.
I was basically wondering if anyone out there has tested the effect of using any solution from the CSS_read_me.txt in a responsive setup. And, if so, what measures needed to be taken (if any) to maintain responsiveness. Does the responsive.css eliminate the need to add any responsive calls to a p_??.css driven page? Do we need a p_??_mobile.css and p_??_tablet.css with the responsive_classic template?
We don't have a test site or customer using any of these and we start our round of rodeos next week through mid- to late-April.
Even if nothing is needed, wouldn't it be beneficial to have the file there? With or without responsive-driven additions, knowledge is power.