html - text-align and margin CSS properties are not responsive -


.scss

div.playlist {     position: relative;     display: inline-block; } div.playlist {     span {         position: absolute;         text-align: center;         height: 100%;         width: 100%;         color: white;         font-size: 20px;     }     .span-icon {         padding-bottom: 50px !important;     } } div.playlist span:before {     display: inline-block;     vertical-align: middle;     height: 100%;     content: ''; }

.html

<div class="playlist">   <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>   <span>{{data.text}}</span>   <img [src]="data.imageurl" [alt]="data.text" /> </div>

out put

enter image description here

now need shown below.please don't consider different icon type , text.i need this.i need responsive top right , bottom right appearance of icon , text.i have tried text-align: right , margin properties.but know approach not responsive on different view ports.so can me solve issue?

enter image description here

position both icons , span text absolute , if needed use css calc() function align them @ top-right , bottom-right above image.

.playlist {    position: relative;    display: inline-block;    width: 240px;    height: 200px;    overflow: hidden;  }    .playlist img {    width: 100%;    height: 100%;  }    .playlist .span-icon {    position: absolute;    top: 5px;    right: calc(100% - 98%);    color: #fff;  }    .playlist .tm {    position: absolute;    bottom: 5px;    right: calc(100% - 98%);    color: #fff;  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <div class="playlist">    <span class="span-icon"><i class="fa fa-film"></i></span>    <span class="tm">2:10</span>    <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">  </div>


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more