Create space under add to cart button in mobile view

[Heatherbell]

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.

[Hotclutch]

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

 

[Heatherbell]

@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..

[MrPhil]

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.

[Heatherbell]

@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.

[Hotclutch]

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.

[Heatherbell]

@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>

[Heatherbell]

@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

[Heatherbell]

@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>

[Heatherbell]

@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.

[Heatherbell]

@JcMagpie I am happy to take sound advice and help but yours has proven not to be.

[Hotclutch]

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.

[Heatherbell]

@Hotclutch Thank you for your reply - tried that and no matter how many times I hit Ctrl Shift R to refresh, nothing changes.

[Hotclutch]

replace <div class="col-sm-12 cm-pi-jcm_product_info_delivery_note">

with

<div class="col-sm-12">

[Hotclutch]

BTW it's Ctrl + f5 to refresh.

[Heatherbell]

@Hotclutch Thank you for your reply. Tried that but no change - the div still overlaps the button as shown in the image posted above.

[Hotclutch]

a link to the page would help.

[Heatherbell]

@Hotclutch Yes I've done Ctrl f5 too.

[Heatherbell]

@Hotclutch https://cornishhoney.co.uk/product_info.php?cPath=25&products_id=30

[Hotclutch]

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.

 

[Heatherbell]

@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.

[Heatherbell]

@Hotclutch Thanks so much for the time and help you have given - that worked - yay!

[Hotclutch]

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 ...

 

[♥JcMagpie]

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.

[Heatherbell]

@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