Category Image Display Problems

Hello,

On my Categories Lising page I have a column that is 647 pixels wide to display my 6 category images - 3 across by 2 rows.

Each category image is 200 pixels wide - that means I have 47 pixels (23 pixels for the padding between each image) to use as column spacing between the three images.

No matter what I try I can't seem to get the padding/margin which is currently on the right hand side of the three images (which are all touching each other) between the images themselves.

Your help would be appreciated.


Kind regards,
Robin

Hello Nicolas,

I tried that and it did work but the width of the images themselves are compressed.

There is a wider margin on the right hand side of the container that contains the three images, than there is on the left.

If I could get rid of that wider margin it would hopefully give the images the extra width and get them to their correct size.

I also have another problem relating to PRODUCT images.

When I click on one of the CATEGORY images I am taken to the products in that category.

Again these images have no margin between them and are compressed. Also, there is no Add to Cart button showing.

I also created a separate menu item for this category using the PRODUCT LISTING type menu.

When I click on that menu the images are very compressed - they do have a margin between them - and the Add to Cart button is showing.

I'm a bit confused. Can you provide some more help please.


Kind regards,
Robin

Hello Nicolas,

Thanks for that.

Will go over the adding of products and menus again to see what might be wrong.

The site is not yet live so I can't give you access at the moment.

There are a few more questions that I will need to ask a little later on.


Kind regards,
Robin

@Robjen: Is there any way you could post the html source code and the css of the page that you are having a problem with. Maybe attach them as files. I can then replicate the page on my side and see if I can help with css.

@Nicolas: Hope you dont mind if someone else helps out.

Hello Arathol,

As requested, I have included two source files and most of the CSS files that I think you need. I have also made a couple of screen shots that may help you to see what's going on. Thank you for offering to take the time to have a look at these files.


SOURCE 1

This is the source of the page generated from the DRESSES menu - which is a Products Listing menu. The images are compressed ( the width), yet there is quite a bit of room on the right side of the right image. I would also be happy to remove the margin on the left of the left image. Ideally, the three images should be able to fill the entire width of the brown panel above them.


SOURCE 2

This is the source that is the result of clicking on one of the items in the SHOP CATEGORIES menu - which is a Categories Listing menu.

The red panel appearing on this page is the result of me adding a sub category of the Dresses category - just to see what happened. Now it's there, I can't work out how to NOT SHOW it.

As you can see, the Add to Cart button does not appear on this page and there is no margin between the images. The images are the correct size (set in the FILES tab for thumbnail width and height).


SUMMARY

I would like to be able to control the size and margins of the images nad use the entire width of the available space if at all possible. In this design, I don't need a margin on the left side of the left image, or the right side of the right image.

Any guidance would be appreciated.



Kind regards,
Robin

OK,

you have a line of code in the actual source of the page

#hikashop_category_information_module_43 div.hikashop_container {
    margin: 0;
}

.hikashop_module .hikashop_container {
    margin: 10px !important;
}

Arathol wrote:

OK,

you have a line of code in the actual source of the page

#hikashop_category_information_module_43 div.hikashop_container {
    margin: 0;
}

This is a style which is overriding the styles in the attached css pages.

@Nicolas - Perhaps Nicolas could let us know how or where the css comes from that gets injected into the actual page source. Im not sure where that comes from.

If you want though, in the mean time, you can open your frontend_default.css file and put the below style at the bottom of the style sheet.

.hikashop_module .hikashop_container {
    margin: 10px !important;
}

if you need help with where or how to open the frontend_default.css file refer to this documentation (

This is not perfect though as you shouldn't use the !important tag too much. Rather find out where that original css style is created from and change or remove that.

Sorry for the multiple posts... Just revisited the original question and I see you tried that already.
My previous explanations were wrong then.

Here is the solution
Setting a margin on the container module will change the image size because the width for that container is a percentage width.

Rather ignore my first postings and set this in your css

.hikashop_module .hikashop_product {
    margin: 4px;
}
.hikashop_module .hikashop_container {
    margin: 4px !important;
}

.hikashop_module .hikashop_container {
    padding: 4px;
}

Hello Arathol,

Thank you for your help. While the code you provided didn't change anything unfortunately, your comments were helpful and gave me some direction about what to look for.

I have been playing around with some classes and have had some success. While still not pixel perfect, it's pretty good.

The classes I have found that effect the display of the Product Listings are shown below with some comments to help me remember what each class can change.

.hikashop_products_listing { } /* Is the container for the products themselves */
.hikashop_products { } /* can change the padding - but that is also handled by the selector below */
div.hikashop_products div.hikashop_subcontainer { border: 1px solid #ccc; padding: 10px; font-size: 13px; } /* targets the border around products and the padding between border and content */
.hikashop_product { width: 202px !important; padding: 0 6px; } /* targets the product - adds a margin and or padding AROUND product listings - can use % or px - can also change the width using for example - width: 30% !important; */
.hikashop_container { width: 200px; }/ /* changes the width and adds padding around the outside of the container */

I'm not finished yet, but I hope this information might help someone else who has been struggling to control the display of products.


Kind regards,
Robin

@Arathol - nice one, dude. You should be one of HikaShop's Tech Team. Anyway, I have encountered the same problem few times and my friend helps me with it anytime he is available. If in case he won't be around, can I ask you for a help instead? Thanks in advance, though.

Hello Arathol,

Thanks for getting back to me.

I'm still in the process of trying to work out how things work in Hikashop myself.

If there is anything that I can do to help I would be happy to do it, provided of course, that I know the answer to the problem.


Kind regards,
Robin

@Robin - No worries. That last solution I gave you should work. Hope you come right. I'm also new to the whole HikaShop component, but learning fast.

@warriorfullights - No problem. Just PM me I suppose when you post a new topic and ill see if i can help out. very busy though so might not get too much time to help out