CSS Style Problems

Phoca Cart - complex e-commerce extension
User avatar
thethe
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 31 Oct 2019, 00:28

CSS Style Problems

Post by thethe » 02 Jul 2020, 13:35

Hi Jan or Benno,

If you look at my site: https://littlelight.com.au/demo/index.php/product

The first product on each row always look a bit longer vertically and narrower horizontally, do you know how I can fix it?

Thanks
Mang

User avatar
thethe
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 31 Oct 2019, 00:28

Re: CSS Style Problems

Post by thethe » 03 Jul 2020, 12:24

ANy updates?
Thanks
Mang

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42734
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS Style Problems

Post by Jan » 04 Jul 2020, 13:12

Hi, it is because the size of the image in first product, which is larger than others, the solution can be:

- have always and everywhere the same sizes of images
- or enable equal heights for the boxes in Options:

Image

Jan
If you find Phoca extensions useful, please support the project

User avatar
thethe
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 31 Oct 2019, 00:28

Re: CSS Style Problems

Post by thethe » 04 Jul 2020, 14:20

Hi Jan,

It is enabled as default. It is already selected as yes. still does not change...

Thanks
Mang

christine
Phoca Hero
Phoca Hero
Posts: 1972
Joined: 28 Nov 2010, 17:20

Re: CSS Style Problems

Post by christine » 04 Jul 2020, 15:27

Hi Mang,

You have different sizes of images. Example:
https://littlelight.com.au/demo/images/ ... _nj5_1.jpg
https://littlelight.com.au/demo/images/ ... putt-3.jpg

Some: height with: 200px, some scaled to apprx. 166px

You can see this also under: Extras > Source > Media > images

Kind regards
Christine

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42734
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS Style Problems

Post by Jan » 04 Jul 2020, 21:11

What happens when you switch to some Phoca template (only for test). As Phoca Cart includes instruction to have equal height of boxes (done per flexbox CSS) :idea:

Jan
If you find Phoca extensions useful, please support the project

User avatar
thethe
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 31 Oct 2019, 00:28

Re: CSS Style Problems

Post by thethe » 05 Jul 2020, 06:55

Hi Thanks for that, you are right, the image size definitely got something to do this.. As I need to change CSS in Phocacart to align with Website template, I used the old Bootstrap.min.css from the older version of Phocacart, to overwrite the new version of phoca cart. Not sure if this have something to do this?

Thanks
Mang

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42734
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS Style Problems

Post by Jan » 06 Jul 2020, 11:58

Hi, hmmm, hard to say, but Bootstrap should not have effect on the flexbox rules ... :idea:
If you find Phoca extensions useful, please support the project

User avatar
thethe
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 31 Oct 2019, 00:28

Re: CSS Style Problems

Post by thethe » 06 Jul 2020, 12:07

Coo, I tried with the new template css file, still the same result. So how do I do Phoca Cart includes instruction to have equal height of boxes (done per flexbox CSS)?

Thanks a lot
Mang

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42734
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS Style Problems

Post by Jan » 06 Jul 2020, 12:24

Hi, try to disable "Fade in actions icons" feature. The flexbox only works when this feature is disabled. Try to disable it for test - to see if the flexbox is working for you.

Jan
If you find Phoca extensions useful, please support the project

Post Reply