PupStar Posted July 2, 2014 Share Posted July 2, 2014 @@burt I am playing with designing a template in bootstrap and I am trying to reduce the size of the body container to lets say 960px wide but when I do this it also breaks the responsive layout. I have googled and its a bit baffling with various different answers, as you are an expert of/in BS I thought you would be the very man to speak to for guidance Thanks Mark Link to comment Share on other sites More sharing options...
burt Posted July 2, 2014 Share Posted July 2, 2014 @@PupStar 1. set body to 960 width and margin auto. 2. set a media breakpoint of 960 and in this breakpoint set body 100% body { width: 960px; margin: 0 auto; } @[member=media] (max-width: 960px) { body { width: 100%; } } L2: simple to understand L3: likely means nothing to most readers, it simply centers the whole site L6: when the viewport is <= 960, (L7 - L8) body is set 100%, no need to center a 100% wide body. Look up breakpoints and get used to using them. Link to comment Share on other sites More sharing options...
PupStar Posted July 2, 2014 Author Share Posted July 2, 2014 @@burt @@wHiTeHaT Thanks, lots of BS3 reading to do now. Link to comment Share on other sites More sharing options...
Melhor Posted March 4, 2016 Share Posted March 4, 2016 Hi, somebody could help me where I can managed the height of the caption box? That's the box where te price and buttons are showed. I dont need to show price and buttons, took these out but still have lot of loosed space. see sreenpicture thank for help Link to comment Share on other sites More sharing options...
Melhor Posted March 4, 2016 Share Posted March 4, 2016 Hi guys, found it. changed some code in includes/modules/content/front_page/templates/cm_fp_new_products.php <div class="col-sm-6 col-md-3"> <div class="thumbnail equal-height"> <a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></a> <div class="caption"> <p class="text-center"><a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo $new_products['products_name']; ?></a></p> <hr> <p class="text-center"><?php echo $currencies->display_price($new_products[''], tep_get_tax_rate($new_products['products_tax_class_id'])); ?></p> <div class="text-center"> <div class="btn-group"> changed to : <div class="col-sm-6 col-md-3"> <div class="thumbnail equal-height"> <a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></a> <div class=""> <p class="text-center"><a href="<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']); ?>"><?php echo $new_products['products_name']; ?></a></p> <p class="text-center"><?php echo $currencies->display_price($new_products[''], tep_get_tax_rate($new_products['products_tax_class_id'])); ?></p> <div class=""> <div class=""> </div> </div> now it looks like see printscreen. maybe it helps somebody. I dont need or want "Prices", "View" and "Buy Now" buttons in this pages and I hate waste of loosed space, because the human eye loose focus, attention when he/she dont see everything in the spectrum(center) and because Image(s) says more then 1000 words. Link to comment Share on other sites More sharing options...
♥14steve14 Posted March 4, 2016 Share Posted March 4, 2016 Just out of curiosity why have you left all the empty divs in there. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
Melhor Posted March 4, 2016 Share Posted March 4, 2016 if you take them away you blow up the look of the shop. All pictures/products comes in ONE Column Link to comment Share on other sites More sharing options...
camery Posted March 8, 2016 Share Posted March 8, 2016 @@PupStar 1. set body to 960 width and margin auto. 2. set a media breakpoint of 960 and in this breakpoint set body 100% body { width: 960px; margin: 0 auto; } @[member='media'] (max-width: 960px) { body { width: 100%; } } L2: simple to understand L3: likely means nothing to most readers, it simply centers the whole site L6: when the viewport is <= 960, (L7 - L8) body is set 100%, no need to center a 100% wide body. Look up breakpoints and get used to using them. I've tried this, and it does make the site 960px but it does not center, it just stays to the left? Does anybody have an idea why that is? Link to comment Share on other sites More sharing options...
Melhor Posted March 8, 2016 Share Posted March 8, 2016 @@camery, think most easy and best way is to play with admin/configuration/bootstrap setup & the wide of the contents in admin/modules/content. These settings fix automatically the right settings for smartphones and tablets. No need to change css for best view in all devices Link to comment Share on other sites More sharing options...
camery Posted March 9, 2016 Share Posted March 9, 2016 @ Thanks for replying, but there is no difference playing with the admin/configuration/bootstrap setup. The shop is like glued to the left side of my desktop. Link to comment Share on other sites More sharing options...
Melhor Posted March 9, 2016 Share Posted March 9, 2016 normally its centered. Undo all changes you did or start a CLEAN setup Link to comment Share on other sites More sharing options...
camery Posted March 9, 2016 Share Posted March 9, 2016 It is a new installation of Oscommerce bootstrap-3-in-2334-responsive-from-the-get-go. I have added: WYSIWYG CKE Editor edit pages BOOTSTRAP version Horizontal Categories Menu BS Modular Front Page Theme Switcher That's it. I just now tried replacing the index.php with the original, but no luck, the shop is still to the left. I have not made any changes to the user.css file other than the width code from Burt above. Link to comment Share on other sites More sharing options...
♥14steve14 Posted March 9, 2016 Share Posted March 9, 2016 You must have noticed when the store lost its formatting and moved to the left assuming that you are not just blindly changing code without checking at every stage. Only you know what you were doing when the change happened. Using your backup copies of files you were altering I would go back through them until you get to the stage where the site is centered. This should be easy if you have backups of the complete file set before starting to alter code to add addons. If you haven't got these, lesson learned and in future keep copies. As you have very few mods added I would just re install the original version and start again and remember to keep backups of all files and database before making any changes. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
camery Posted March 9, 2016 Share Posted March 9, 2016 When installing the addons, the shop had full width, so no, did not notice any change. You're right, i will go through my backups and check when the centering got off, just thought someone knew where to look. Anyway, thank you very much for your time and help. :thumbsup: Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.