Topic: E-Commerce Card footer not included in "wrapper"

shawn1 pro asked 5 years ago


Good day, I am having an issue with the footer in the E-Commerce Cards, they are displaying outside of the blocked area or "wrapper" where the main body and text is enclosed. The footer is enclosed inside the main card div <div class="card"> and <div class="card-block text-xs-center">. Thank you for any assistance.
                        <!--Card footer-->
                        <div class="card-footer">
                            <span class="left">49$ <span class="discount">199$</span></span>
                            <span class="right">
                                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></i></a>
                                <a class="" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
                            </span>
                        </div>

Kamil Paciepnik free answered 5 years ago


shawn1, Could you show me some demo on your website? Which framework you are using? Regards

shawn1 pro answered 5 years ago


Here you go.
@model OneMRKT.Module.Social.ViewModels.AgentProductsViewModel

<div id="Storefront" class="tabcontent">
    <!-- TODO: SG - Add resellPrice/wholesale tab as well. Needs JS tool to display one or the other-->
    @{
        if (!Model.agentProduct.Any())
        {
            <div class="col-md-4">
                <!--Bootstrap Card
                //Create Transparent image "Buy Products to Sell here."
                    <!--Card-->
                <div class="card">
                    <!--Card image-->
                    <div class="view overlay hm-white-slight z-depth-1">
                        <img src="~/images/bad-profile-pic-2.jpeg" class="img-responsive" alt=""/>  <!--class="img-responsive" ??-->
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
                    <!--Card content-->
                    <div class="card-block text-xs-center">
                        <!--Category & Title-->
                        <h5>SampleCategory</h5>
                        <h4 class="card-title"><strong><a href="">No Products Yet</a></strong></h4>
                        <!--Rating-->
                        <ul class="rating">
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star-o"></i></li>
                        </ul>
                        <!--Description-->
                        <p class="card-text">
                            Sample Description Goes Here
                        </p>
                        <!--Card footer-->
                        <div class="card-footer">
                            <span class="left">49$ <span class="discount">199$</span></span>
                            <span class="right">
                                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></i></a>
                                <a class="" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
                            </span>
                        </div>
                    </div>
                    <!--/.Card content-->
                </div>
                <!--/.Card-->
            </div>
            <div class="col-md-4">
                <!--Card-->
                <div class="card">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight z-depth-1">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
                    <!--Card content-->
                    <div class="card-block text-xs-center">
                        <!--Category & Title-->
                        <h5>Category</h5>
                        <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
                        <!--Rating-->
                        <ul class="rating">
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star-o"></i></li>
                        </ul>

                        <!--Description-->
                        <p class="card-text">
                            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
                        </p>

                        <!--Card footer-->
                        <div class="card-footer">
                            <span class="left">49$</span>
                            <span class="right">
                                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></i></a>
                                <a class="" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
                            </span>
                        </div>

                    </div>
                    <!--/.Card content-->

                </div>
                <!--/.Card-->
            </div>
        }
    }
</div>

Kamil Paciepnik free answered 5 years ago


shawn1, I can’t recreate you problem. Could you share your html files?

shawn1 pro answered 5 years ago


I have confirmed, the CSS file I am using is the filepath MDB Big bundle -> MDB Pro -> CSS -> MDB.css

shawn1 pro answered 5 years ago


I have purchased and downloaded the big bundle. Is there another .css and .js file I should be using?

Kamil Paciepnik free answered 5 years ago


Cards that you use are designed for PRO version. Which version you are using? Regards

shawn1 pro answered 5 years ago


Footer error Here you go, as you see the footer is outside the "Box", any help would be greatly appreciated.

Kamil Paciepnik free answered 5 years ago


Hi shawn1, could You please share screen with problem? Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags