♥peterpil19 Posted January 13, 2017 Share Posted January 13, 2017 Hi, I am still getting my head around the 2.4.3 BS. I would like to understand better the grid layout system and have been doing reading on how to use bootstrap grids generally. However I cannot seem to follow the layout at all in product_info.php sufficiently enough to make changes. I want to achieve the layout in the attached photo for product information (when clicking on a product). Product image on the left, to the right are names and details of extra product fields which I created (with the names in one column and the details in another simply so that they align), and at the bottom (spanning the length of the image and product fields) is a general description of the product. I am able to achieve this layout below using conventional html tables etc. However when I attempt to use a bootstrap grid I fail miserably. My product fields end up on top of the product image and scattered all over the shop (literally). I can't follow whether the the product image is in a column or row. In other words I cannot work out the beginning of the containers and what is where. In other words I cannot visualise the grid in which I am trying to make changes. When I try and put the entire code relating to the product image in its own column, it makes no difference at all. Some general help on how the product_info.php page is laid out from the product onwards would be helpful. If I could visualise the grid then that would be a great starting point. Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
♥raiwa Posted January 13, 2017 Share Posted January 13, 2017 Hello Peter @@peterpil19, You may have a look here: http://getbootstrap.com/css/#grid About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥peterpil19 Posted January 13, 2017 Author Share Posted January 13, 2017 Thanks, I have been doing quite a bit of reading on that site about bootstrap and it's been very helpful and I'm continuing to learn. What would be helpful to me specifically is understanding of the default layout in oscommerce in the products info page. Nothing I am doing (by reference to the material on bootstrap) is working. If someone could quickly explain what the default grid looks like on that page thens that will help me understand what I'm reading in the product_info.php page. If it helps, I can be a bit more specific. Let's take the product image. Is that in a column? It simply says <div class="piGal pull-right">, no reference to a column. Do I need to place it in a column to then create my product fields in the column to the right? (I've tried that and it doesn't work). Is it already in a row? etc. Thanks Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
♥raiwa Posted January 13, 2017 Share Posted January 13, 2017 @@peterpil19, "pull-right" class is the bootstrap helper/shortcut for float: Quick floats:http://getbootstrap.com/css/#helper-classes About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
Dan Cole Posted January 13, 2017 Share Posted January 13, 2017 @@peterpil19 Peter having an understanding of CSS definitely helped me to get a better grasp on bootstrap and how to work with some of its helper classes. For that I found W3Schools to be a big help. Their TRY ME feature is an excellent learning tool. Best of luck. Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥peterpil19 Posted January 13, 2017 Author Share Posted January 13, 2017 Hi Thank you for your responses, I am grateful however I would be even more grateful for some practical direction or tips. I've spent hours looking at the resources provided and gotten nowhere and am stuck... ( I'm not a programmer). There must be a basic approach to achieve what I am after: image on the left, product details on the right (2 columns, 1 column has the subject, the other the detail) with the entire product details stacking under the image on smaller devices. It's not a complicated layout so I'm sure someone can give a few pointers in a few words. In any event, this is the approach I have taken: 1. Created a row: a. put the image into a column b. created another column: i. into that column put the 2 columned list, using the list-group function. i. I've had to specify widths for each column in that list, e.g. <li class="list-group-item borderless col-sm-8">. Otherwise the columns match the width of their contents and then run consecutively rather than maintaining a dual column format. Here is the link to my page. On a full screen it works the way i want it to, however when you resize the screen or view it on a phone, the 2 columned list does not collapse under the image. I can't figure it out why and I've googled the subject to death... Thanks again if anyone can point me in the right direction. http://www.ancientcointraders.com/product_info.php/cPath/23/products_id/36 Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
ecommunlimited Posted January 13, 2017 Share Posted January 13, 2017 @@peterpil19 I got the code in my file to move the image to the left. It's simple to do. It will be a day or so before I could send it. I'm out of town at the moment. These might help with your layout. All work with v2.3: Tab Menu Section (TMS) - Content Templates Manager - Product Tabs You can see some images of the Contents Template Manager here: http://www.hava.ge/modules.php?name=Webmaster&prj=osCommerce&op=Content-Templates-Manager Take care Bill Link to comment Share on other sites More sharing options...
Dan Cole Posted January 13, 2017 Share Posted January 13, 2017 the 2 columned list does not collapse under the image. I can't figure it out why and I've googled the subject to death... @@peterpil19 Peter the text is dropping below the images when I look at it. Have you cleared your cashe? Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥peterpil19 Posted January 14, 2017 Author Share Posted January 14, 2017 I worked it out with a little bit of trial and error. For those that are interested : I changed the column in which I had placed the product details to 'pull-left' which allowed the product details column to stack under the image on a smaller screen. The other issue I solved was the image overflowing its column. In CSS it was defined to have a fixed width (and auto height) which meant it would not reduce in size when reducing the screen size. I changed the width to 100% in user.css and that has solved the problem Now all I have to work out is: 1. How to get some space between the image and the product details which stack underneath the image on a small phone. Margin-bottom (on the image) or margin- top (on the product details column) doesn't seem to be having any effect. 2. The 2 columns are also collapsing into each other rather than remaining horizontal and collapsing beneath the image as a whole. I'll keep reading to see what I can do to stop this. Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
burt Posted January 14, 2017 Share Posted January 14, 2017 <div class="row"> <div class="col-sm-6">6/12 on SM and above, 12/12 on XS</div> <div class="col-sm-3">6/12 on SM and above, 12/12 on XS</div> <div class="col-sm-3">6/12 on SM and above, 12/12 on XS</div> <!-- row above totals 12 units ( 6+3+3 ), next row therefore drops below it --> <div class="col-md-9"> <!-- 9/12 wide on MD and above. 12/12 wide on SM and XS --> <!-- lets split this 9 wide column into 3 equal sized columns on SM and above, and 2 equal sized columns on XS --> <div class="row"> <div class="col-xs-6 col-sm-4">4/12 on SM and above. 12/12 on XS.</div> <div class="col-xs-6 col-sm-4">4/12 on SM and above. 12/12 on XS.</div> <div class="hidden-xs col-sm-4">4/12 on SM and above. HIDDEN on XS.</div> <!-- row above totals 12 units ( 4+4+4 ) , next row (if you add another) drops below it --> </div> </div> <div class="col-md-3"> 3/12 on MD and above. 12/12 on SM and below </div> <!-- row above totals 12 units ( 9 + 3) , next row (if you add another) drops below it --> </div>That is a super-simple example. Always work in rows and columns. Always work in multiples of 12. Link to comment Share on other sites More sharing options...
♥peterpil19 Posted January 14, 2017 Author Share Posted January 14, 2017 Thanks again, All issues are now solved and the page works across all different sizes (desktop, ipad, iphone). All had to do with being able to count to 12...who knew that could be so hard... ;) Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.