Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Create space under add to cart button in mobile view


Recommended Posts

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

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

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

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

@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

@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

@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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...