Post by labeshops » Sat Mar 05, 2016 11:31 pm

I am trying to wrap my head around bootstrap and am getting some of it....BUT I am not understanding the push/pull thing to re-order position of blocks on different screen sizes so.. HELP!!!

Using the 2.2 default template and am trying to move the block containing price and buy button (the right column in other words) to just below the additional image section on small devices. Right now it goes all the way down to the bottom and since I have a number of products with a lot of attributes, that is too far down. The current class for that section is:

Code: Select all

        <?php if ($column_left || $column_right) { ?>
        <?php $class = 'col-sm-6'; ?>
        <?php } else { ?>
        <?php $class = 'col-sm-4'; ?>
        <?php } ?>
        <div class="<?php echo $class; ?>">
I have tried a number of things to change this section's position and it doesn't do squat :( What do I need to add to push that section left on mobile and description+rest of the left column right on them?

My development site is /test-site added to my first link in my signature.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by cyclops12 » Sun Mar 06, 2016 4:24 am

not too sure on your question but would be interested in the answer also.

one question labeshops...... is that a fresh 2.2 install as i just installed 2.2 and my product page is different to yours..

this is yours:
your2-2.JPG

your2-2.JPG (53.3 KiB) Viewed 975 times

and this is mine:
my2-2.JPG

my2-2.JPG (45.51 KiB) Viewed 975 times

the add to cart buttons and content layout look completely different

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by artcore » Sun Mar 06, 2016 5:53 am

Hi Labeshop,
The right column flips beneath the left one because the left is a singular big column. If you want it to go under the additionals you need to break up the left column so that the images are in their own column together with the right one in one encompassing div. Hope that makes sense :)
I'm on the tablet so I'll try to visualize it by some quasi code without real classnames.

For your effect to happen it could look like this:
<div col12>
<div col-6>images</div> <div col-6>price + buttons</div>
</div col-12>

<div col-12>description> (this one could also be within the first <div col-12> under the col-6's)

Now, when there's not enough screen size the price+buttons div will move under the images. It would work for you as the two top columns are the same height now. If the price+button area grows bigger you would see a gap under the images.

This has to happen within the content area so you're not affecting the actual right and left module positions.

Pull-left or pull-right class is just a float:left or float:right
These are a bit dangerous as they pull the content out of the regular flow which can have unforseen effects.

Hope it makes sense :)

Attn: I no longer provide OpenCart extensions, nor future support - this includes forum posts.
Reason: OpenCart version 3+ ;D

Thanks!


User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by labeshops » Sun Mar 06, 2016 6:27 am

cyclops12 wrote:not too sure on your question but would be interested in the answer also.

one question labeshops...... is that a fresh 2.2 install as i just installed 2.2 and my product page is different to yours..

this is yours:
your2-2.JPG
and this is mine:
my2-2.JPG
the add to cart buttons and content layout look completely different

Yes, but I have begun to modify it which is why it looks different. I always start with the default template and them change it as I want it myself.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by labeshops » Sun Mar 06, 2016 6:50 am

artcore wrote:Hi Labeshop,
The right column flips beneath the left one because the left is a singular big column. If you want it to go under the additionals you need to break up the left column so that the images are in their own column together with the right one in one encompassing div. Hope that makes sense :)
I'm on the tablet so I'll try to visualize it by some quasi code without real classnames.

For your effect to happen it could look like this:
<div col12>
<div col-6>images</div> <div col-6>price + buttons</div>
</div col-12>

<div col-12>description> (this one could also be within the first <div col-12> under the col-6's)

Now, when there's not enough screen size the price+buttons div will move under the images. It would work for you as the two top columns are the same height now. If the price+button area grows bigger you would see a gap under the images.

This has to happen within the content area so you're not affecting the actual right and left module positions.

Pull-left or pull-right class is just a float:left or float:right
These are a bit dangerous as they pull the content out of the regular flow which can have unforseen effects.

Hope it makes sense :)
Hmmmm well, not exactly but I think I might have figured out the issue in that I'm forgetting bootstrap is mobile first. So I'm redoing the page to be the way I want to be on mobile then will alter the class to display differently if the page is medium or wide. I think that may be the issue....we'll see lol

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA
Who is online

Users browsing this forum: No registered users and 50 guests