One thing I hate about the way the default 3.0.3.2 theme shows the product page on mobile is that it moves add to cart all the way to the bottom. I've been trying to figure out how to move it to just under the images when viewed on a mobile screen but cannot for the life of me figure it out. Its fine where it is on larger screens, so just want to move it when viewed on a mobile device.
Any tips?
Last edited by labeshops on Fri Aug 25, 2023 9:43 pm, edited 3 times in total.
Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Hi, it involves a simple adjustment of the code position within your Twig file.
View all extensions | Request custom work | Pricing | Contact Me
Can you give more details than that? I've looked at the twig file and I cannot figure out how it places what where when the screen size changes. I assume it puts the right hand column which is where the title/price/buy button is after the images and description which is in the left column, but how do I keep it where it is in the larger view and move it above description in the smaller view?
Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Basically, the default template has 4 parts which display as:
|---------pic-------------| |-----------buy-------------|
|---description tabs-|
|-------related products----------------------------|
This is fine for large and medium screens. But for Small/xsmall screens, I want to do:
|---------pic------------|
|---------buy-----------|
|---desc tabs---------|
|---related prods----|
I tried using order-xs-1 order-xs-2 etc, but it didn't change anything. I know bootstrap is mobile first, so do I need to adjust the product.twig file to put it in the mobile order, then do something like push/pull to move things around for md/large screens? Not totally understanding the syntax for push/pull and what I tried didn't work at all.
|---------pic-------------| |-----------buy-------------|
|---description tabs-|
|-------related products----------------------------|
This is fine for large and medium screens. But for Small/xsmall screens, I want to do:
|---------pic------------|
|---------buy-----------|
|---desc tabs---------|
|---related prods----|
I tried using order-xs-1 order-xs-2 etc, but it didn't change anything. I know bootstrap is mobile first, so do I need to adjust the product.twig file to put it in the mobile order, then do something like push/pull to move things around for md/large screens? Not totally understanding the syntax for push/pull and what I tried didn't work at all.
Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
You can check my previous post on it:
viewtopic.php?t=231755#p859717
viewtopic.php?t=231755#p859717
View all extensions | Request custom work | Pricing | Contact Me
Doing that totally destroys the layout on desktop and tablets. I ONLY want the change to be on small screens.
Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Hi!
You can use mobiledetect.php.
1. In controller initialize mobiledetect class and pass results to the template.
2. In template add mobile device class to body tag.
3. Use body class in your CSS.
Also you can use my extensions "Custom templates Pro".
You can use mobiledetect.php.
1. In controller initialize mobiledetect class and pass results to the template.
2. In template add mobile device class to body tag.
3. Use body class in your CSS.
Also you can use my extensions "Custom templates Pro".
My FREE extensions in marketplace. [ security | flexibility | speedup ]
Then duplicate the tabs.
hidden-xs: Hides an element on extra-small (xs) screens.
Apply this class to hide tabs for mobile.
hidden-lg hidden-md hidden-sm: Hides an element on large (lg), medium (md), and small (sm) screens.
Apply this class to hide tabs for desktop and tablets
hidden-xs: Hides an element on extra-small (xs) screens.
Apply this class to hide tabs for mobile.
hidden-lg hidden-md hidden-sm: Hides an element on large (lg), medium (md), and small (sm) screens.
Apply this class to hide tabs for desktop and tablets
View all extensions | Request custom work | Pricing | Contact Me
That worked! Thank you!
Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Who is online
Users browsing this forum: Majestic-12 [Bot] and 11 guests
