Product image centering problem on wide window

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
11 months 3 weeks ago #357811

-- url of the page with the problem -- : goldfieldfireworks.com/index.php/our-fir...000-firecracker-roll
-- HikaShop version -- : 5.0.2
-- Joomla version -- : 4.4.1
-- PHP version -- : 8.1.26
-- Browser(s) name and version -- : Firefox 78.15.0esr

The product image is not centered in the page, if the screen is wide. On a narrow screen such as a phone, it is centered, but on a wide screen such as a tablet or desktop, the image is over on the right side.

You can see this by looking at this page for one example. It is true for all products.
goldfieldfireworks.com/index.php/our-fir...000-firecracker-roll
Change the size of the browser window, and you can see how it is centered on a narrow window but to the right on a wide window.

How can I fix this so that it is always centered?

I already have this code already in my Front-end CSS file, so I don't think this fixes it:

div#hikashop_product_right_part {
width: 100%;
}

Thank you for your help!

Attachments:
Last edit: 11 months 3 weeks ago by bw92116.

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13399
  • MODERATOR
11 months 3 weeks ago #357823

Hi,

The problem is a layout customization problem, not a CSS problem.
You've customized the show_default view file, via the menu Display>Views to have the "price" block on the left side area and the "image" block on the right side area.

HikaShop will automatically move the areas one below the other on small screens.
For example, on demo.hikashop.com/index.php/en/hikashop/...ct-page/with-options you can see the image on the left side, and the vote, price, options, quantity input, buttons and specifications on the right side. But on small screens, it automatically shifts one below the other.

So in short, if you want to have the image centered, move it to the bottom area instead of the right side area via the Display>Views interface in the show_default view file.

Please Log in or Create an account to join the conversation.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
11 months 3 weeks ago #357851

Thank you for your help Nicolas.

I have removed all customizations on all views. I have even reinstalled the Hikashop 5.0.2 files by downloading the .zip file from this site and installing it again in Joomla. For Front end CSS, I have switched it to Default instead of custom. I am not using any Joomla template overrides.

I have cleared all caches in Joomla, and in my web browser. But, I am still getting the product image on the right side of the screen. I can't figure out why it is on the right side of the screen, instead of on the left of the screen as shown in the example on your demo site.

Example page: goldfieldfireworks.com/index.php/our-fir.../1726-howler-rockets

Attached to this is a screen shot of the first part of the show_default view. It shows that the image should be on the left. But on my site, it is still showing up on the right of the screen. What could be causing it to move to the right?

Thank you for your help.

Attachments:
Last edit: 11 months 3 weeks ago by bw92116.

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13399
  • MODERATOR
11 months 2 weeks ago #357854

Hi,

If it's not a view override issue, then you probably changed the "layout on product page" setting of the configuration page of HikaShop from "default" to "reverse".

Please Log in or Create an account to join the conversation.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
11 months 2 weeks ago #357868

Yes, that is what it was. That fixed it. Thank you Nicolas!

Please Log in or Create an account to join the conversation.

Time to create page: 0.065 seconds
Powered by Kunena Forum