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?
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?
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>
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+
Thanks!
Thank-you Artcore. That is what I was looking to do. As I was trying it, I realised I could just move the title.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>
Code: Select all
<h1><?php echo $heading_title; ?></h1>
Code: Select all
<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<div class="row">
Who is online
Users browsing this forum: No registered users and 11 guests