Jump to content
Sign in to follow this  
Heatherbell

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.

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

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

Untitled-10.jpg

Share this post


Link to post
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.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get (stable) Frozenpatches or (unstable) Edge. See also the naming convention and the latest community-supported responsive "Edge" release

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

@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

Untitled-10.jpg

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by Hotclutch

Share this post


Link to post
Share on other sites

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

with

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 ...

 

Share this post


Link to post
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.


 

Share this post


Link to post
Share on other sites

@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

Untitled-10.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×