Responsive layout issues

Hi Dave,

I’ve checked your site, it seems you did edit the JM Lingerie theme on your site. Could you let me know what changes you made?

Regarding the user guide, may I know which part is not clear? It would be great if you can advice points where we could change to improve our guide. Thanks in advance.

Hi Lee, Thanks for your response -- the only edit I made was to the static blocks on the home page for the product tabs to show categories instead.

There are too many mistakes or missing information for me to discuss all the issues I’ve had with the documentation here. One example is that there is no guide for the product tabs "mode" -- I wanted to change these (as I eventually did to make categories) -- but it does’nt explain anywhere in the guide about how these modes can be changed or what other options there may be.

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="attribute" }}</div>
<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="most_reviewed"}}</div>
<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="top_rated"}}</div>

I am also having a problem with configurable product pages > configurable product selections not fitting? See image attached.
Attachment 36685

Go to this File: /skin/frontend/default/jm_lingerie/css/styles.css

1. Add this code

Code:

.catalog-product-view .side-col .products-grid li.item{
   height: auto !important;
}

2. Replace this code

Code:

#product-options-wrapper.product-options .input-box {
     background: url("../images/bg-dropdown-select.png") no-repeat scroll 90% 50% #FFFFFF ;
    border: 1px solid #DDDDDD ;
    display: inline-block;
    float: left;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
     margin-right: 10px;
    width: 165px;
}

with

Code:

#product-options-wrapper.product-options .input-box {
     background: url("../images/bg-dropdown-select.png") no-repeat scroll 90% 50% #FFFFFF ;
    border: 1px solid #DDDDDD ;
    display: inline-block;
    float: left;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
     margin-right: 10px;
    width: 165px !important;
}

Hi Chavan,

Thank you -- this has corrected the side column issue with latest products.

However the configurable product drop down issue is still persisting -- the second "size" attribute is not working.

Kind regards, Dave

Go the same file: /skin/frontend/default/jm_lingerie/css/styles.css

Replace this code

Code:

#product-options-wrapper.product-options .input-box select {      background:rgba(255,255,255,0);     border: medium none;     line-height: 1;     margin: 0;     color: #333333 ;    font-size: 12px;     padding-left: 5px;     width: 190px;     height:27px; }

With

Code:

#product-options-wrapper.product-options .input-box select {      background:rgba(255,255,255,0);     border: medium none;     line-height: 1;     margin: 0;     color: #333333 ;    font-size: 12px;     padding-left: 5px;     width: 190px !important;     height:27px; }

Hi Chavan, thanks again for your response.

It seems the first block is working ok, but the second drop down option is still very small. http://boobytraps.com.au/haberdasher…s-moulded-cups

Kind regards, Dave

Dear Dave,

To fix product drop down issue, please open the file /skin/frontend/default/jm_lingerie/css/styles.css:

At line 2432, find and remove this rule:

Code:

#product-options-wrapper.product-options dd.last .input-box {
    width: 70px;
}
#product-options-wrapper.product-options dd.last .input-box select {
    width: 95px;
}

Go to this File: /skin/frontend/default/jm_lingerie/css/styles.css

Replace this code

Code:

#product-options-wrapper.product-options .input-box select { 	 background:rgba(255,255,255,0);     border: medium none;     line-height: 1;     margin: 0; 	color: #333333     font-size: 12px;     padding-left: 5px;     width: 190px; !important;! 	height:27px; }

With

Code:

#product-options-wrapper.product-options .input-box select { 	 background:rgba(255,255,255,0);     border: medium none;     line-height: 1;     margin: 0; 	color: #333333     font-size: 12px;     padding-left: 5px;     width: 190px; !important; 	height:27px; }

you have added an extra exclamatory in the code. try this

Hi Chavan,

Thanks again and my apologies, I did add that after checking the update and left it there. I have corrected now but it doesn’t solve the issue.

As you can see there are two configurable options -- they appear different sizes which is what we are trying to resolve. Because the demo doesn’t have any config product I’m not sure what it should look like? Side by Side or One above the other?

I’m not sure if two 190px boxes will fit next to each other?

Hoping we can resolve this issue as I still have many more for this template that I need to move on to fix.

Kind regards, Dave

Hi Chavan,

You can see here with three configurable options the last option is still very small and not evenly spaced. Please advise how this can be resolved. Again the template demo didn’t have any configurable product to review purchase.

I also wonder about the use of the label "Choose An Option" rather than most design that show what the option is such as Size or colour. Maybe this could be an idea for the next release of the template.

I look forward to your response to these issues.

Kind regards, Dave

Hi Ziven,

Thank you. This has resolved my issue.

Kind regards, Dave