Product Large layout issue on mobiles
Mahendran Sep 15, 2014 4:35 AMMy products Large page is staggered on Mobiles and can not shop, but it is ok on normal browsers. Can some one help?
the page : Any products : 50 Ezywipes with a carry Tube
the issue ( responsive?) Dropbox - for BC.JPG
Current Online shop layout - Individual product -Large HTML :
<div class="shop-left col-lg-5 col-md-5 col-sm-12">
<div class="product1">
<div class="ImageWrapper">
{tag_largeimage}
</div>
<!-- ImageWrapper -->
</div>
<!-- end product1 -->
<div class="thumbnails clearfix">
{tag_poplets}
</div>
</div>
<!-- shop-left -->
<div class="shop-right col-lg-7 col-md-7 col-sm-12">
<div class="product_title title">
<h3>{tag_name}</h3>
</div>
<div class="product-price">{tag_saleprice}</div>
{tag_description}</div>
<div class="shop-right col-lg-7 col-md-7 col-sm-12">Rating: {module_ratingrank}<br />
<div class="quantity">Qty: <strong>{tag_addtocartinputfield}</strong></div>
<div class="price-detail">{tag_addtocart}<br />
</div>
<div class="price-detail">{tag_attributes}<br />
</div>
<!-- row -->
</div>
<!-- shop right -->
<div class="clearfix"></div>
<hr />
<div class="row">
<div class="shop-right col-lg-7 col-md-7 col-sm-12">
<div class="product-details-wrap">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#more-info" data-toggle="tab">More info</a></li>
<li class="active"><a href="#review" data-toggle="tab">Review</a>
</li>
</ul>
<hr />
<div class="clear"></div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="more-info">
{tag_productmetadescription}</div>
<div class="tab-pane fade active in" id="more-info"><br />
</div>
<div class="tab-pane active" id="review">
<h3>What others say about this product</h3>
<div>{module_ratingfeedback}<br />
</div>
<div><br />
</div>
<h3>Tell us what you think</h3>
<form name="catratingform26849" onsubmit="return checkWholeForm26849(this)" method="post" action="/RatingProcess.aspx?OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item"><label>How much you like this product?</label><br />
OK <input type="radio" name="Rating" value="1" /><input type="radio" name="Rating" value="2" /><input type="radio" name="Rating" checked="checked" value="3" /><input type="radio" name="Rating" value="4" /><input type="radio" name="Rating" value="5" />Very Good</div>
<div class="item"><label id="RFeedback">Do you have feedback? (Optional)</label><br />
<textarea class="comment" name="Feedback" id="RFeedback" cols="10" rows="4"></textarea></div>
<div class="item"><label id="RFullName">Name (Optional)</label><br />
<input class="cat_textbox_small" type="text" name="FullName" id="RFullName" maxlength="255" /></div>
<div class="item"><label id="RWebsite">Website (Optional)</label><br />
<input class="cat_textbox_small" type="text" name="Website" id="RWebsite" maxlength="255" /></div>
<div class="item"><label id="REmailAddress">Email Address (Optional)</label><br />
<input class="cat_textbox_small" type="text" name="EmailAddress" id="REmailAddress" maxlength="255" /></div>
<div class="item"><label>Enter Word Verification in box below •</label><br />
{module_captchav2}</div>
<div class="item"><input class="cat_button" type="submit" value="Submit" /></div>
</div>
</form>
</div>
</div>
</div>
<div class="title1">
<h3></h3>
<h3>RELATED ITEMS</h3>
<hr />
<p class="lead">{tag_relatedproducts,2}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm26849(theForm){var why = "";if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if (why != ""){alert(why);return false;}theForm.submit();return false;}
//]]>
</script>
<script type="text/javascript">
$( ".catProdAttributeItem select" ).addClass( "form-control" );
$( ".productPopletsItem a img" ).addClass( "img-thumbnail" );
$( "table.productTable .productItem" ).addClass( "col-lg-4 col-md-4 col-sm-4 col-xs-12 grid cs-style-4" );
$( ".price-detail .productSubmitInput" ).addClass( "productSubmitInput btn btn-darkblue" );
</script>
Thank you all in advance!!
