KRISTINVELLA Posted January 17, 2015 Share Posted January 17, 2015 Hi, I am using CC5 and my site did not pass googles mobile friendly site test. Is this something easily fixed or would it require extensive coding? Thanks. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 17, 2015 Share Posted January 17, 2015 The non-trial mode of CubeCart 5 has a mobile skin as part of the package. Recent versions of CC5 will have this skin available unrestricted. The mobile skin needs to be enabled in the admin Store Settings. Then, when CubeCart matches the mobile device's "user-agent string" against a pattern of known strings, CubeCart should automatically use the mobile skin. Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 17, 2015 Author Share Posted January 17, 2015 Thankyou very much, I have done that and added my logo. Is there any way for the hompage to display on the mobile site? I was reading another article posted in the forum, where the guy had said he could find no way for his homepage to display on his mobile site. Thanks. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 17, 2015 Share Posted January 17, 2015 In the mobile skin template file content.homepage.php, try adding at the very top, this:{if isset($DOCUMENT)} <div id="announcement"> <h1>{$DOCUMENT.title}</h1> {$DOCUMENT.content} </div> {/if} Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 18, 2015 Author Share Posted January 18, 2015 Thankyou, I did that and it did work, but the only problem was the website sliders, were just images, the 'best sellers' and all the category pics, were not resized to fit on the mobile screen. This is my website: http://redroseinvitations.com.au You could only see the first half of the screen, it was still at desktop size, if that makes sense. Thanks, Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 18, 2015 Share Posted January 18, 2015 "the website sliders" I don't know what you are referring to. Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 18, 2015 Author Share Posted January 18, 2015 I have attached a file and highlighted in green the website slider. So its 5 or 6 images that change every few seconds. Its the first thing on the homepage. Thanks Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 18, 2015 Share Posted January 18, 2015 When I tell your store I am using a mobile device, I get the Mobile-Red skin. For the Mobile-Red, I do not see the "Homepage" document. Were you thinking that the Mobile skin would somehow be able to force the images (included in the Homepage document?) of a "slider" to scale down to an appropriate size to fit? You would need to develop the CSS for the slideshow to be "responsive" to that scaling action. Maybe the author of the slideshow could help with that. The pictures and the tables holding the pictures are in fixed widths. They would need to be expressed as a percentage of the width of their containing block. Quote Link to comment Share on other sites More sharing options...
SimChris Posted January 18, 2015 Share Posted January 18, 2015 CC5 is NOT a responsive theme. It has a mobile function, based on 2010 "thinking" on mobile of having a different version of site CSS load. CC6 has a responsive framework, to use the "same pages" for desktop, tablet, phone, and does those tricky things like modern sites. Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 19, 2015 Author Share Posted January 19, 2015 Thankyou SimChirs and Brian. Yes I was thinking, it would be able to re-scale to fit on the mobile screen. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted January 19, 2015 Share Posted January 19, 2015 To resize the images in the mobile skin you could try this. It should resize the image to fit the screen. In your mobile skin change <div id="slideshow"> <div> <img alt="" src="images/source/Sliders/RSVPs_card.png" style="width: 700px; height: 350px;" /></div> <div> <img src="images/source/Sliders/Free-Guest-Names.png" style="width: 700px; height: 350px;" /></div> <div> <img src="images/source/Sliders/Free-Shipping-deal-R1.png" style="width: 700px; height: 350px;" /></div> <div> <img src="images/source/Sliders/Discounts_over_100.png" style="width: 700px; height: 350px;" /></div> <div> <img src="' alt='' class='ipsImage' >'>' alt='' class='ipsImage' >"/></div> </div> to <div id="slideshow"> <div> <img alt="" src="images/source/Sliders/RSVPs_card.png" class="sliderimg" /></div> <div> <img src="images/source/Sliders/Free-Guest-Names.png" class="sliderimg" /></div> <div> <img src="images/source/Sliders/Free-Shipping-deal-R1.png" class="sliderimg" /></div> <div> <img src="images/source/Sliders/Discounts_over_100.png" class="sliderimg" /></div> <div> <img src="' alt='' class='ipsImage' >'>' alt='' class='ipsImage' >" class="sliderimg" /></div> </div> Add the following to your mobile skin css file .sliderimg { border: none; max-width: 100%; display: block; margin: 0 auto; } Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 19, 2015 Author Share Posted January 19, 2015 Thankyou, I have tried to find the .php document and had some trouble. Would you know what the filename is? When I click on a category, the text about that category is missing and when I click on a category that has sub-categories, the text and images are missing. Would you know of a way to fix this too? Thanks. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 19, 2015 Share Posted January 19, 2015 In the mobile skin template file content.category.php, try this skin modification by making this edit: Was: <h2>{$category.cat_name}</h2> {if isset($SUBCATS) && $SUBCATS} <ul id="menu" class="accordion"> {foreach from=$SUBCATS item=subcat} <li><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></li> {/foreach} </ul> {/if} Now: <h2>{$category.cat_name}</h2> {if isset($category.image)}<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>{/if} {$category.cat_desc} {if isset($SUBCATS) && $SUBCATS} <ul id="menu" class="accordion"> {foreach from=$SUBCATS item=subcat} <li><a href="{$subcat.url}" title="{$subcat.cat_name}"><img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /></a> <a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></li> {/foreach} </ul> {/if} I haven't checked to see what this looks like. Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 20, 2015 Author Share Posted January 20, 2015 Thankyou Brian, thats great! Such a big help! Just 2 issues - please see attachment, the text hits the edge of the screen, can it be slightly reduced? Like the home page text. The product images are slightly blurry, is this something that can be fixed? If not, its ok. They become clear, once I've clicked on the product image itself. Thanks Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 20, 2015 Share Posted January 20, 2015 Try, in the mobile skin style file common.css, add the following at the bottom: #page_content > p { margin: 0 5px !important; } Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 21, 2015 Author Share Posted January 21, 2015 Worked wonders! Thankyou again Brian. Quote Link to comment Share on other sites More sharing options...
KRISTINVELLA Posted January 22, 2015 Author Share Posted January 22, 2015 Hi Brian and Chris, Would either of you know which file the code is in, that ayz1 was talking about? I have messaged him, but haven't back from him. Thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.