Heatherbell Posted April 7, 2019 Share Posted April 7, 2019 Using Frozen CE - in mobile view an adjacent div (which has a margin) to the add to cart button is losing the margin in mobile view and partially obscuring the add to cart button. How to add space around the button? Sorry if this is not enough info but appreciate any help or advice. Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 please post the contents of your tpl_cm_pi_buy_button.php you can go in there and modify the last parameter of tep_draw_button, by adding margin there. last parameter should have btn-success, so replace btn-success with: btn-success m-2 this should put margin all round the button, not sure if that is what you want, or if you just want margin left/right/top/bottom and in which views Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Thanks for your reply. The problem only exists in mobile view as mentioned so it is a space at the bottom needed in mobile view only - the space is there in normal view.. Link to comment Share on other sites More sharing options...
MrPhil Posted April 7, 2019 Share Posted April 7, 2019 Keep in mind that top and bottom margins behave a little oddly. You usually won't get both of them, but just one or the other (the larger one?). See if you're expecting both of them, and only one is being used. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @MrPhil Thanks for your reply. The div below the button only has top margin set but is being ignored in mobile view. Tried a few things (sorry I have next to no knowledge) to both the button and the div below but having no effect in mobile view. Any advice gratefully received. Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 more information is needed. Which page are we on? that does not look like the product page, in which case what i gave won't work. you need to show us the code you are using for the price & delivery div. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Thanks for the reply - sorry - it is product page - the price and delivery div is a product_info content module - the code on the template file is: <div class="col-sm-<?php echo $content_width; ?> cm-pi-jcm_product_info_delivery_note"> <div class="panel panel-success"> <?php if (constant('MODULE_CONTENT_JCM_PRODUCT_INFO_DELIVERY_NOTE_HEADER_' . $selectedLanguage) != '') { echo '<div class="panel-heading"> <i class="fas fa-truck" <pre> </pre></i> ' . constant('MODULE_CONTENT_JCM_PRODUCT_INFO_DELIVERY_NOTE_HEADER_' . $selectedLanguage) . ' </div>'; } if (constant('MODULE_CONTENT_JCM_PRODUCT_INFO_DELIVERY_NOTE_TEXT_' . $selectedLanguage) != '') { echo '<div class="panel-body">' . constant('MODULE_CONTENT_JCM_PRODUCT_INFO_DELIVERY_NOTE_TEXT_' . $selectedLanguage) . '</div>'; } ?> </div> </div> Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @JcMagpie Thanks for your reply. Your answer does give space visually but the div still overlaps the button causing problems when pressing the button on a mobile - see picture Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @JcMagpie Don't know where you get your source code from but it is nothing like we see on page source code - nothing commented out <div class="col-sm-12 cm-pi-jcm_product_info_delivery_note"> <div class="panel panel-success"> <div class="panel-heading"> <i class="fas fa-truck" <pre> </pre></i> Prices & Delivery </div><div class="panel-body">Prices include applicable VAT<br />Packing & delivery charges for most U.K. postcodes will be £4.00 + VAT for small (less than 400mm x 50mm) post box packets or £8.00 + VAT for parcels or free for orders over £90.00<br />Delivery usually 3-5 working days<br />See Terms & Conditions of Sale & Delivery for details</div> </div> </div> Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @JcMagpie With respect, trust me the code I pasted is exactly from Chrome development tools source code and not from file. Your arrogance is not helpful as proven in a separate thread we have already had which resulted in you having to change your code in a module. Therefore if anyone has any advice or help to solve the issue it is appreciated. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @JcMagpie I am happy to take sound advice and help but yours has proven not to be. Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 simply replace <div class="panel panel-success"> with <div class="panel panel-success mt-2"> this will add top margin across all views, but it is possible to add margin to specific views only. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Thank you for your reply - tried that and no matter how many times I hit Ctrl Shift R to refresh, nothing changes. Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 replace <div class="col-sm-12 cm-pi-jcm_product_info_delivery_note"> with <div class="col-sm-12"> Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 BTW it's Ctrl + f5 to refresh. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Thank you for your reply. Tried that but no change - the div still overlaps the button as shown in the image posted above. Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 a link to the page would help. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Yes I've done Ctrl f5 too. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch https://cornishhoney.co.uk/product_info.php?cPath=25&products_id=30 Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 mt-2 may not be defined in Bootstrap 3, only 4. so you can try adding this to your custom.css .mt-2 {margin-top: 1rem} then press ctrl+ f5 to see if that works. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @JcMagpie So this shows with you but not on our Chrome inspector - nothing commented out in our file - just checked. This has nothing to do with our question so not sure why you have posted. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Thanks so much for the time and help you have given - that worked - yay! Link to comment Share on other sites More sharing options...
Hotclutch Posted April 7, 2019 Share Posted April 7, 2019 you could probably tidy up by undoing all the suggestions in this thread, and simply adding .cm-pi-jcm_product_info_delivery_note {margin-top: 1rem} to the custom.css that's what that definition is for ... Link to comment Share on other sites More sharing options...
♥JcMagpie Posted April 7, 2019 Share Posted April 7, 2019 35 minutes ago, Heatherbell said: This has nothing to do with our question so not sure why you have posted. Not a problem sorry to have wasted your time, It's been removed along with all the other poor advice, Will take it as a learning opportunity and will try not to make the same mistake again. Link to comment Share on other sites More sharing options...
Heatherbell Posted April 7, 2019 Author Share Posted April 7, 2019 @Hotclutch Sorry I spoke too soon - it has only fixed visually but the div still overlaps the button as shown in the image which causes problems pressing the button on screen Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.