Post by corin » Thu Feb 25, 2016 6:19 am

I am using the default template and OC 2.1.0.2

I have adjusted the CSS of the template and bootstrap to give me the look I want... with one small exception.

On the product page, there are two divs, col-sm-8 (which contains the images and description) and col-sm-4 (which contains the product name, qty, add to cart button).

In views over 768px wide, the divs are side by side: col-sm-8 takes 67% and col-sm-4 takes 33%.

However in views less than 768px wide, the col-sm-4 appears below col-sm-8 when really it should be before. How and where would I change this?

Newbie

Posts

Joined
Thu Feb 25, 2016 6:05 am
Location - Montreal

Post by WayneOB » Sat Feb 27, 2016 8:55 am

There could be several reasons for this; for example there may be div containers within the cols at set widths (px) instead of %.

If you can provide a link to site would enable people to be of more help.

New member

Posts

Joined
Tue Feb 09, 2016 6:33 pm

Post by artcore » Sat Feb 27, 2016 3:44 pm

That's normal behavior. The right column moves under the left one whenever there's no more space for both. The break points for this are in de Bootstrap CSS - @media (max-width.....etc

You can just take the div with class col-sm-4 and move it above the col-sm-8 and add pull-right to it if you want it to be on the original spot.

<div class="col-sm-4 pull-right> contents </div>
<div class="col-sm-8> contents </div>

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 corin » Wed Mar 02, 2016 6:10 am

artcore wrote:That's normal behavior. The right column moves under the left one whenever there's no more space for both. The break points for this are in de Bootstrap CSS - @media (max-width.....etc

You can just take the div with class col-sm-4 and move it above the col-sm-8 and add pull-right to it if you want it to be on the original spot.

<div class="col-sm-4 pull-right> contents </div>
<div class="col-sm-8> contents </div>
Thank-you Artcore. That is what I was looking to do. As I was trying it, I realised I could just move the title.

Code: Select all

<h1><?php echo $heading_title; ?></h1>
and put it before the row div in product.tpl

Code: Select all

    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
     <h1><?php echo $heading_title; ?></h1>
      <div class="row">
However it looks better overall with the title in col-sm-4 on the right as you suggested.

Newbie

Posts

Joined
Thu Feb 25, 2016 6:05 am
Location - Montreal

Post by artcore » Wed Mar 02, 2016 3:42 pm

Glad to be of help ;)

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
Who is online

Users browsing this forum: No registered users and 9 guests