<div class="list card">
<div class="item item avatar item-icon-right">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Simran Kaur</h2>
<p>November 06, 1992</p>
</div>
I have this piece of code in ionic and whatsoever image I add here takes up most of the space. Why is that and how do I fix this?
It looks like this:
Here is my complete code:
<div class="list card">
<div class="item item avatar item-icon-right">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Simran Kaur</h2>
<p>November 06, 1992</p>
</div>
<div class="item item-body">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
There is an example of how card should be coded. Avatar is renderd small on the left side, cover is rendered big, and occupy whole space.
Here is codepen with your image rendered both small and big: http://codepen.io/anon/pen/RPvYpp
<div class="list card">
<div class="item item-avatar">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>