Jump to content

CC5 mobile friendly


KRISTINVELLA
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...