♥JcMagpie Posted August 6, 2019 Share Posted August 6, 2019 9 hours ago, LeeFoster said: I want the gallery on the left and because of the size everything else gets pushed below it. Just set gal to 6 wide and anything that needs to sit next to it has to be 6 or less in width. Just remember any row can only be 12 wide so if an item is 12 wide it can not sit next to any other item. You can have any number of items next to each other as long as the all add up to no more than 12. Maintaining this layout on all screen sizes is simply not posiable as Bootstrap will reoder based on screen size. You will need to add much more css to maintain any layout over diferent screen sizes. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 I have set as below Name = 10 & 12 Gallery = 20 & 6 Price = 30 & 6 Buy button = 40 & 6 Share buttons = 50 & 6 Tabbed description = 60 & 12 This is how it looks Link to comment Share on other sites More sharing options...
♥BrockleyJohn Posted August 6, 2019 Share Posted August 6, 2019 An issue you might get, depending on the screen width is if the description runs out longer than the images you can get a gap underneath the gallery. There is not a way to get the description to start to the right of the image and then wrap underneath it without code changes/replacement modules. Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released. Looking for a payment or shipping module? Maybe I've already done it. Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x Link to comment Share on other sites More sharing options...
CommerceMania Posted August 6, 2019 Share Posted August 6, 2019 Keep it simple and clean. Make the buy button/text visible. Use high quality images. And the OP layout looks decent! Link to comment Share on other sites More sharing options...
♥BrockleyJohn Posted August 6, 2019 Share Posted August 6, 2019 11 minutes ago, LeeFoster said: I have set as below Name = 10 & 12 Gallery = 20 & 6 Price = 30 & 6 Buy button = 40 & 6 Share buttons = 50 & 6 Tabbed description = 60 & 12 This is how it looks There are a couple of things that could force those 6-widths down: styling making something wider than it should be, and left/right floats Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released. Looking for a payment or shipping module? Maybe I've already done it. Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 No matter what I put next to the gallery it defaults to the same height as the gallery Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 6, 2019 Share Posted August 6, 2019 Just tested on Phoenix 1.0.1.2 and out of the box I'm not abe to produce what you need. I would suspect that some aditional css changes are required. Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 6, 2019 Share Posted August 6, 2019 50 minutes ago, LeeFoster said: No code changes? The only code changed was mentioned in the original thread you found. It was CSS added to the user.css file to control the length of the image placeholder. I did also add some padding to the buy now button as I wanted to make that intl a module which would have had padding in it but that has been done now in the latest version. I am about to try the same thing on the latest Phoenix version so it will be interesting to see if it still works. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 13 minutes ago, JcMagpie said: Just tested on Phoenix 1.0.1.2 and out of the box I'm not abe to produce what you need. I would suspect that some aditional css changes are required. I'm on Edge bs4 and I suspect the same. Just don't want to hard code css changes and break it in mobile view. Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 6, 2019 Share Posted August 6, 2019 10 minutes ago, LeeFoster said: I'm on Edge bs4 and I suspect the same. Just don't want to hard code css changes and break it in mobile view. You are right. I have just tried and regardless of what I try I cannot replicate the layout I had in Frozen. Something somewhere must have changed. I have had a quick look through the module files and the template files and they look very much the same. . I will have to dig deeper. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 1 minute ago, 14steve14 said: You are right. I have just tried and regardless of what I try I cannot replicate the layout I had in Frozen. Something somewhere must have changed. I have had a quick look through the module files and the template files and they look very much the same. . I will have to dig deeper. Thanks it's much appreciated. Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 6, 2019 Share Posted August 6, 2019 7 minutes ago, LeeFoster said: Thanks it's much appreciated. It may be worth contacting Gary and see what he says as it was his suggestion last time that it should just work. He may know what is different. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 2 minutes ago, 14steve14 said: It may be worth contacting Gary and see what he says as it was his suggestion last time that it should just work. He may know what is different. @burt Can you offer any insight please? Link to comment Share on other sites More sharing options...
burt Posted August 6, 2019 Share Posted August 6, 2019 BSv4 uses Flexbox and does not have a "masonry" style capability at the moment. This approach that can be used in BSv3 cannot be used in BSv4. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 4 minutes ago, burt said: BSv4 uses Flexbox and does not have a "masonry" style capability at the moment. This approach that can be used in BSv3 cannot be used in BSv4. Thanks @burt Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 6, 2019 Share Posted August 6, 2019 Thats a shame. Had a quick look here and it went straight over my head. https://www.w3schools.com/bootstrap4/bootstrap_flex.asp REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
burt Posted August 6, 2019 Share Posted August 6, 2019 You'll notice none of those examples show an output like the image posted earlier. They are all in standard rows. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 20 minutes ago, burt said: You'll notice none of those examples show an output like the image posted earlier. They are all in standard rows. What;s the best way to achieve it then? Or is it a case of it cant? Link to comment Share on other sites More sharing options...
burt Posted August 6, 2019 Share Posted August 6, 2019 4 minutes ago, LeeFoster said: What;s the best way to achieve it then? Or is it a case of it cant? Idea: Chop up the product_info page and make modules installable per chopped section. Like the navbar is done (home, left, right). That adds in different problems but may be a solution that works. Would take some hardcore coding though. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 4 minutes ago, burt said: Idea: Chop up the product_info page and make modules installable per chopped section. Like the navbar is done (home, left, right). That adds in different problems but may be a solution that works. Would take some hardcore coding though. So a Left, Right, Top, Bottom. May be a lot more work then I'm wanting to do on this at the moment. Could it not be done easier with card-columns? Link to comment Share on other sites More sharing options...
burt Posted August 6, 2019 Share Posted August 6, 2019 Just now, LeeFoster said: So a Left, Right, Top, Bottom. May be a lot more work then I'm wanting to do on this at the moment. You've already seen the problem. What if someone else wants; Top Left Right Left Middle Right Left Bottom And then someone else wants Left Right Full Full Left RIght Full Put simply; The overall controlling module would need to be able to be changed to any layout needed. Then the modules would need to dynamically pick up available slots. Good Luck with that! Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 2 minutes ago, burt said: You've already seen the problem. What if someone else wants; Top Left Right Left Middle Right Left Bottom And then someone else wants Left Right Full Full Left RIght Full Put simply; The overall controlling module would need to be able to be changed to any layout needed. Then the modules would need to dynamically pick up available slots. Good Luck with that! Yeah that's a bit beyond me Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 6, 2019 Share Posted August 6, 2019 1 hour ago, LeeFoster said: Yeah that's a bit beyond me It all depends on what you are trying to do. If you are just looking to fix one layout get it right and then never wanting to mess with it then the solution is very easy. Decide on the key layout you wish to fix, ie top line then one left and one right. Hardcode that into your product info page, then any othe stuff can be added as normal below that. You are basicly trying to do fixed yet responsive layout for part of your page which can be done with BS4. https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fixed-layout.php If your going be chainging the product info layout every week, month, year..... then you have more work to do. Question gets even more intresting if you wish to have a diferent layout per product type! Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 7 minutes ago, JcMagpie said: Question gets even more intresting if you wish to have a diferent layout per product type! What do you mean? Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 6, 2019 Share Posted August 6, 2019 Well a simple product like a M5 screw costing 1p may only need a simple basic layout. A complex power tool costing a few £k may need a far more complacated layout. The one size fits all is not allways the best sollution but that's another discussion not relavent to your question. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.