Page 1 of 1

How to make product-info left / right responsive?

Posted: Mon Dec 12, 2016 10:38 am
by thomash2
Hi, I'm using this Responsive Design - Default Original Theme for 1.5.X to learn how to make my site responsive, and I got the front and info pages responsive, using max-width and width=100% on the containers and boxes, along with the @media to collapse or hide the top menu bar.

But I can't get the product-info DIV to be internally responsive between the left and right.
Could someone give me a hint?

So inside product-info is a left and right DIV. Left has product-image and -additional-image, while the right side contains the price, option carts.

I want t he right side fixed width at 320px and the left side to fill in the rest of the space. I set product image to max-width:100%; height:auto; so the image should fill in the left DIV. I also removed the float-left from the nested DIVs in the left side.

But I can't seem to find a way to do get the left DIV to fill in the empty screen space. I could only get the left side to be fixed (then downsize with @media when browser is scaled down), or use a width percentage, with either both left and right DIVs floating, or right side floating and left side inline-block. But either method does not completely fill in the empty space.

Any ideas or examples someone could show me?

Re: How to make product-info left / right responsive?

Posted: Mon Dec 12, 2016 11:16 am
just to be honest with you, you won't get far, by trying to play around with this, and before you'll end up in plain frustration, better read here first. I played around with this Theme, without getting anywhere, visually at least.
making the default template responsive
Everything, below the 'standard' of this Theme, should not longer be considered, because, to make a Shop look good in all Resolutions, the 'Rules and Standards' of Bootstrap must apply, and this is fully the Case, when changing to this one. I am exited about, how easy it can be handled, and fine tuned, whereever required eventually, to match individual Designs. Can be seen here in Action, momentarely:
OC Bootstrap - Opencart Bootstrap 3 Theme - Front End ... n_id=14631
Just to have it said! Good Luck ;)

bootstrap_3_free_theme.jpg (23.77 KiB) Viewed 1070 times