CCv6 Foundation template not mobile-friendly?

[StruzA]

I am using the CC v6 Foundation template and wonder what I am not doing correctly, or why it is not mobile friendly? I have modified the site to fit wide so I can have more products per line, but when I look on the site from my phone its all distorted and definitely squeezing everything in. It looks horrible. How do I get it to be mobile -friendly? 

I also wondered why the image magnifier is not working either yet the files are installed with the foundation template??

This is my site: www.candesigner.com

[Dirty Butter]

22 minutes ago, StruzA said:

I have modified the site to fit wide so I can have more products per line

Welcome to the forums, @StruzA More than likely this modification has caused your issue. Try renaming the files you modified and replacing them with the stock files. You can download the full copy of 6.0.12 from the CC site.

[StruzA]

I only modified small sections of the code to allow for more products per line, change background color and to widen the site. Other than that, I didn't touch anything. I used help from going through the forum topics and searching for what i was needing. To replace those files (main.php, foundation.css) would mean starting over from scratch. As for the magnifier, I didn't touch any of those files at all and it never worked from the get go. Is there not an easier way to get it to work on mobile?

[bsmither]

For the BX-Slider images: I suppose you added the images using the rich text editor when editing the Homepage document. The editor, by default, adds width and height attributes to the <img> tag. Switch the editor to Source mode and remove the tag's width and height attributes.

Then, make sure you are using images that are as wide as the largest width browser window you expect the visitor to have. I think this version of the BX Slider plugin does not have the capability to scale up the image.

For the "small" rendering layout, I see
<div id=main_content" class="small-3 large-12 columns">

Try using just "small-12".

[StruzA]

13 minutes ago, bsmither said:

For the BX-Slider images: I suppose you added the images using the rich text editor when editing the Homepage document. The editor, by default, adds width and height attributes to the <img> tag. Switch the editor to Source mode and remove the tag's width and height attributes.

For the "small" rendering layout, I see
<div id=main_content" class="small-3 large-12 columns">

Try using just "small-12".

What file would I change that info for the "small-12" in? I can't remember...

I will try removing the width and height attributes and see how that goes. I also considered removing the slider altogether. Not sure if I want it to stay there.

[StruzA]

41 minutes ago, bsmither said:

For the BX-Slider images: I suppose you added the images using the rich text editor when editing the Homepage document. The editor, by default, adds width and height attributes to the <img> tag. Switch the editor to Source mode and remove the tag's width and height attributes.

Then, make sure you are using images that are as wide as the largest width browser window you expect the visitor to have. I think this version of the BX Slider plugin does not have the capability to scale up the image.

For the "small" rendering layout, I see
<div id=main_content" class="small-3 large-12 columns">

Try using just "small-12".

That worked PERFECT for the home page..I just need to figure out why its not working for the product page now.

[StruzA]

I'm slowly figuring out how to make it look on mobile...got the homepage and individual product page sorted out, just need to work on the category section now.