SOLVED Project images and buttons disappear when selected on mobile

  • Posts: 173
  • Thank you received: 14
  • Hikashop Business
4 years 5 months ago #313191

-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.9.13
-- PHP version -- : 7.2.24
-- Browser(s) name and version -- : Opera and Chrome latest
-- Error-message(debug-mod must be tuned on) -- : No error message. Image and 'add to cart button' jump off screen on mobile

Hi,
I couldn't see a similar problem so I've posted this.
On mobile phone devices (e.g. htc U11, Moto G) When I click on a product image from any module, the next screen which should show product information plus an image and 'add to cart' button, shows non of these.

On PC based browsers I have noticed that these items do appear and then jump to the right but are still just in view.

We haven't made any changes to the display of this page, the template or the buttons.

Any advice to get this back to normal would be appreciated.

Ian and Stu

edit: If I disable the social media buttons plugin this fixes the issue but we don't want to lose that functionality. I'll leave it with the problem switched on (12hrs) so that some advice can be provided but we need to keep the shop running on this form factor coming into xmas.

Last edit: 4 years 5 months ago by smithshop123. Reason: Additional information

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
4 years 5 months ago #313203

Hi,

It's just a CSS issue.
Add such CSS on your website:
.hikashop_product_page .hk-row-fluid{ clear: both; }
and that will prevent the problem.

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

  • Posts: 173
  • Thank you received: 14
  • Hikashop Business
4 years 5 months ago #313244

Thanks,
I've also noticed on the small mobile form factors that;
recaptcha goes off the screen
login forms during checkout go off the screen

and it doesn't let you scroll the page to access them. Will the abovementioned css change fix this and where do I enter this css information (e.g. as an override)?

Thanks,
Ian and Stu

edit:
The css code provided solved our issue regarding the social media icons pushing the product off the screen. However, for small devices, registration pages and checkout pages still disappear off the screen. There is a good thread here but the solution didn't work for our gantry based template.

As always, we really appreciate your assistance and that of the forum members

Last edit: 4 years 5 months ago by smithshop123. Reason: more information

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
4 years 5 months ago #313250

Hi,

Regarding the checkout, I would first recommend to turn off the "checkout legacy" setting in the HikaShop configuration in order to switch to the new checkout as you're currently using the old checkout from HikaShop 1.x and 2.x.
It shold work much better.

Regarding the CSS modification, you can add it to your template (some templates provide a file where you can add your custom CSS). Or you can also add it in the "styles on the frontend" in the HikaShop configuration:
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 173
  • Thank you received: 14
  • Hikashop Business
4 years 5 months ago #313287

Thanks,
turning of 'legacy' for the cart helped a bit but it would be good if the email and address fields could be aligned left (or padding adjusted) to provide more space on small form factors. I had a look at the properties (inspected) but it was too daunting.

Ian and Stu

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
4 years 4 months ago #313294

Hi,

You can do that with a bit of CSS:

@media only screen and (max-width: 768px)  {
#hikashop_checkout_registration .hkform-group.control-group {
    display: block;
}
}

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

  • Posts: 173
  • Thank you received: 14
  • Hikashop Business
4 years 4 months ago #313360

Thanks for getting back to us but this change had no effect when entered to end of the front end CSS.

Kind regards,
Ian and stu

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
4 years 4 months ago #313362

Hi,

Well, I have to disagree with you. I do see the change on your website on mobile:
monosnap.com/file/6vcDCrx4jrSssRLcK9hjnVfuOHuR4D
And before it was like that:
monosnap.com/file/4yAu9BeK0sqizV7McLRgVZCrftblTu
I suppose that you didn't clear the cache of your browser and thus didn't get the new CSS when you checked.

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

  • Posts: 173
  • Thank you received: 14
  • Hikashop Business
4 years 4 months ago #313387

Yeah,
I have retract and agree. I was trying so many changes last night that I may have missed clearing the cache.

I was from a different site today and noticed it was working really well during testing.

Mark this one as solved!

Many thanks for your time and patience.

Ian and Stu

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

Time to create page: 0.071 seconds
Powered by Kunena Forum