X-Cart forums

[rowdybunny]

On the home page where the category images are displayed I would like to use wide images and have one category image displayed on each row that will take up the area that the three category images now take up. I currently have 4 categories setup. I have change my category image to 800 x 300 and I am running into a few problems.

First it is still displaying in a row of three categories so on the first row my first three category images are overlapping. The second row is displaying as I would like it to (because of course there is only one category in that row). How to I change this so only one category/image is displayed per row.

Next it seems that changing the category image size to 800 x 300 is preventing it from being responsive. My original image size is 800 x 300 which is why I change it to that image size, but as the screen size gets smaller the image does not. What can I set this to to have my 800 x 300 image resize to a smaller size as the screen size gets smaller.

[qualiteam]

Try the following CSS code:

.subcategory-icon img {
  width: 800px;
  max-width: 100%;
  height: auto;
}

body ul.subcategory-view-icons.subcategory-list.grid-list > li {
  float: none;
  width: auto;
  display: block;
}

You can add it on the "Look & Feel" -> "Custom CSS" tab, but the better way is wrapping this up into a custom module:
http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files

[rowdybunny]

Thanks for the response. I've had some trouble creating custom modules. I have been working with x-cart a little under a year and so far none of the ones I have tried have worked. So I went with custom CSS.

I now have one category image per row, but the image is still not the correct size, which is kind of strange as yesterday when I was working with this they were the correct size, just overlapping three per row.

After I made my post last night in the Look and Feel section I changed my Category Image sizes back to a width of 250 and had intended to change it back to 800 once I got an answer here.

After I read your reply I changed the image size back to 800 in the Look & Feel section and then updated the custom CSS. Images were still 250px. I cleared the Aggregation cache as well as my browser cache, I even redeployed the store. I deleted the category images (renamed them on my end) and uploaded them again. And they are still 250px.

I updated the CSS as follows and still not working:

.subcategory-icon img {
  width: 800px; !important;
  max-width: 100%; !important;
  height: auto; !important;
}

If I remove the above style from the style sheet, I am back to 800px and they are one per row as I want them, but then I run into the problem that they are not responsive.

https://www.phiniac-glass.com/

[razortw]

Add this to your custom CSS

ul.grid-list a span {
  margin: 0 auto;
  width: 100%;
}

[rowdybunny]

Thanks a bunch! That did the trick!

[razortw]

Great to know I was able to help