Topic: Changing height of Card product
carrollga
pro
asked 9 years ago
Hi
I'm using the card feature on a car site. The main reason I'm using it is to get the favorite and share icons to overlay the image. The problem is the card seems to limit the image area in height. I want to be able to control the height so that it reveals the full image what needs to be changed in the code? I have gone through the card and card-product styles but can't find how the image height is controlled.
Also an additional question how do I increase the height of the carousel?
In addition how do I search the topics in support I don't see any search option?
Thanks in advance
<div class="card card-product">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<i class="material-icons">favorite</i>
<i class="material-icons">share</i>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<div class="mask"> </div>
</div>
<!--/.Image-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<i class="fa fa-facebook"> </i>
<i class="fa fa-twitter"> </i>
<i class="fa fa-google-plus"> </i>
<i class="fa fa-linkedin"> </i>
<i class="fa fa-instagram"> </i>
<i class="fa fa-pinterest"> </i>
<i class="fa fa-youtube"> </i>
<i class="fa fa-github"> </i>
<i class="fa fa-envelope-o"> </i>
</div>
<!--/.Social buttons-->
</ul>
</div>
<!--/.Card-->
Add comment
Michal Szymanski
staff
answered 9 years ago
Hi,
I'm not sure if I understand your question. Cards height is set to auto to it should always adjust to the image size.
Do you want to set the image as a background via CSS or put it in your html markup like in our documentation?
The same thing with carousel. However, if you want to set an image as a background via css, take a look at our tutorial. It's dedicated for MDB4 but you can anyway understand the concept.
You can find a search form in the top right corner of our Forum.
If my answer doesn't solve your problem please try to explain in more details.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags