In this blog,  we are going to tell you how to fetch user details and Message statistics via Postmark API. We will  fetch user details through API token.

I hope you already know to configure Postmark API into your application and also send mail through it.

Note: – If you have no idea about the configuration and sending Email process,  you can read our previous article, send email via Postmark API  and learn it easily.


Watch the live demo or download code from the link given below

 retrieving postmark user statistics


We have introduced an online Email management service name MailGet. It supports multiple smtp configuration and also allow you can  manage your contacts, records properly and can send the bulk Emails easily using this service. This Email Marketing Analytics helps you to grow faster and provides better service for managing your emails.

Now, let’s learn how to send  messages with tag name and track them through Postmark API.

To fetch user’s info via Postmark API, you need API token. Using API token, you can easily fetch user info.

Let’s have a look at the section of code given below which we have used in this post to fetch user’s information.

First we have created an object  PostmarkAdminClient through API token and then call listSenderSignatures() method. When this method executes, it returns an object which contain the sender’s signature id.

Now with the help of signature id, you can fetch details about the user. Calling getSenderSignature() method through PostmarkAdminClient, you can easily receive full information of user in the form of object, e.g. Domain ,Email Address , Reply to Email Address , Name .. etc.

$adminClient = new PostmarkAdminClient("$apitoken");
$signatures = $adminClient->listSenderSignatures();
$x=1;
foreach($signatures->senderSignatures as $key=>$signature){
foreach($signature as $sig){
if($x==6){
$signatureid=$sig;
}
$x++;
}
}

$signatureloaded=array();
$signaturedetails = $adminClient->getSenderSignature($signatureid);

$x=1;
foreach($signaturedetails as $detail){
switch($x){
case 1:
$signatureloaded[0]=array("Domain",$detail);
break;
case 2:
$signatureloaded[1]=array("Email Address",$detail);
break;
case 3:
$signatureloaded[2]=array("Reply to Email Address",$detail);
break;
case 4:
$signatureloaded[3]=array("Name",$detail);
break;
case 5:
$signatureloaded[4]=array("Confirmed",$detail);
break;
case 6:
$signatureloaded[5]=array("SPF Verified",$detail);
break;
case 7:
$signatureloaded[6]=array("SPF host",$detail);
break;
case 8:
$signatureloaded[7]=array("SPF text value",$detail);
break;
case 9:
$signatureloaded[8]=array("DKIM verified",$detail);
break;
case 10:
$signatureloaded[9]=array("Weak DKIM",$detail);
break;
case 11:
$signatureloaded[10]=array("DKIM HOST",$detail);
break;
case 12:
$signatureloaded[11]=array("DKIM Text Value",$detail);
break;
case 13:
$signatureloaded[12]=array("DKIM Pending HOST",$detail);
break;
case 14:
$signatureloaded[13]=array("DKIM Pending Text Value",$detail);
break;
case 15:
$signatureloaded[14]=array("DKIM Revoked HOST",$detail);
break;
case 16:
$signatureloaded[15]=array("DKIM Revoked Text Value",$detail);
break;
case 17:
$signatureloaded[16]=array("Safe to remove revoked key for DNS",$detail);
break;
case 18:
$signatureloaded[17]=array("dkim update status",$detail);
break;
case 19:
$signatureloaded[18]=array("return path status",$detail);
break;
case 20:
$signatureloaded[19]=array("return path domain",$detail);
break;
case 21:
$signatureloaded[20]=array("return path domain verified",$detail);
break;
case 22:
$signatureloaded[21]=array("return path domain cname value",$detail);
break;
}
$x++;
}

Now, we have $signatureloaded array that holds all the info about the user. You can easily get all the information by passing the array through foreach loop.

Let’s have a look at the next part of the code which will explain you to fetch message statistics via Postmark API. For this, you need to send messages with tag name which will help you to fetch message stats.

Here is the code to send messages with tag :

try{
$client = new PostmarkClient("<-- Server API Token -->");
$message = [
'To' => "<-- Receiver's Email Address -->",
'From' => "<-- Sender's Email Address -->",
'TrackOpens' => true,
'Subject' => "<-- Subject -->",
'TextBody' => "<-- This body is not plain someting is written inside this message -->",
'HtmlBody' => "<-- HTML Messages -->",
'Tag' => "<-- Tag -->",
'Headers' => [ "X-CUSTOM-HEADER" => "Header content"],

];
$sendResult = $client->sendEmailBatch([$message]);
}catch(PostmarkException $ex){
// If client is able to communicate with the API in a timely fashion,
// but the message data is invalid, or there's a server error,
// a PostmarkException can be thrown.
echo $ex->httpStatusCode;
echo $ex->message;
echo $ex->postmarkApiErrorCode;

}catch(Exception $generalException){
// A general exception is thown if the API
// was unreachable or times out.
}

After sending messages with tag name, now we will fetch sent message details.

Create an object of PostmarkClient and then call getOutboundOverviewStatics() menthod having following parameters:

  • message tag – The tagname you gave in the message . we will track messages with this tag name .
  • date from – date that you want stats of message from, use YYYY-MM-DD format, e.g – 2015-01-01.
  • date upto – date that you want message stats upto, user YYYY-MM-DD format.
 $client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("message tag", "date from ", "date upto "); 

Tutorial Scripts in detail

Below are proper explanation of the code used in this tutorial.

index.php

Using this Php file, we connect to Postmark API and fetch user’s info and message statistics .

<?php
require_once('./vendor/autoload.php');
use Postmark\Models\PostmarkAttachment;
use Postmark\PostmarkAdminClient;
use Postmark\PostmarkClient;
use Postmark\Models\PostmarkException;
ini_set('max_execution_time', 1500);
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<title>Get User Statistics via Postmark API</title>
<script type="text/javascript">

$(document).ready(function() {
$("a#demo_key").click(function() {
var key = "xxxxxxxxxxx";
$("input.postmark-api-key").val(key);
});
});
</script>
</head>
<body>
<div class="container">
<div class="col-md-12">
<div id="main">
<h1>Get Postmark API-Connected User's Statistics </h1>
<div id="login">
<h2>Postmark User's Info Search Box</h2>
<form action="" method="POST">
<label>API Token : </label> <input type="text" name="postmark_api_token" class="postmark-api-key" placeholder="API TOKEN"/>
<label>Server API token : </label> <input type="text" name="postmark_server_api_token" class="postmark-api-key" placeholder="Server API token
"/><a id="demo_key" href="#">Use Demo Server Key</a>
<input type="submit" value="Search" id="submit"/>
</form>
</div>
<?php
if (isset($_POST['postmark_api_token'])) {
$apitoken = $_POST['postmark_api_token'];
if ($apitoken = "xxxxxxxxxxx") {
$apitoken = "<--INSERT API TOKEN HERE-->";
}
$serverapitoken = $_POST['postmark_server_api_token'];
if ($serverapitoken = "xxxxxxxxxxx") {
$serverapitoken = "<--INSERT SERVER API TOKEN HERE-->";
}
$adminClient = new PostmarkAdminClient("$apitoken");
$signatures = $adminClient->listSenderSignatures();
$x = 1;
foreach ($signatures->senderSignatures as $key => $signature) {
foreach ($signature as $sig) {
if ($x == 6) {
$signatureid = $sig;
}
$x++;
}
}
$signatureloaded = array();
$signaturedetails = $adminClient->getSenderSignature($signatureid);
$x = 1;
foreach ($signaturedetails as $detail) {
switch ($x) {
case 1:
$signatureloaded[0] = array("Domain", $detail);
break;
case 2:
$signatureloaded[1] = array("Email Address", $detail);
break;
case 3:
$signatureloaded[2] = array("Reply to Email Address", $detail);
break;
case 4:
$signatureloaded[3] = array("Name", $detail);
break;
case 5:
$signatureloaded[4] = array("Confirmed", $detail);
break;
case 6:
$signatureloaded[5] = array("SPF Verified", $detail);
break;
case 7:
$signatureloaded[6] = array("SPF host", $detail);
break;
case 8:
$signatureloaded[7] = array("SPF text value", $detail);
break;
case 9:
$signatureloaded[8] = array("DKIM verified", $detail);
break;
case 10:
$signatureloaded[9] = array("Weak DKIM", $detail);
break;
case 11:
$signatureloaded[10] = array("DKIM HOST", $detail);
break;
case 12:
$signatureloaded[11] = array("DKIM Text Value", $detail);
break;
case 13:
$signatureloaded[12] = array("DKIM Pending HOST", $detail);
break;
case 14:
$signatureloaded[13] = array("DKIM Pending Text Value", $detail);
break;
case 15:
$signatureloaded[14] = array("DKIM Revoked HOST", $detail);
break;
case 16:
$signatureloaded[15] = array("DKIM Revoked Text Value", $detail);
break;
case 17:
$signatureloaded[16] = array("Safe to remove revoked key for DNS", $detail);
break;
case 18:
$signatureloaded[17] = array("dkim update status", $detail);
break;
case 19:
$signatureloaded[18] = array("return path status", $detail);
break;
case 20:
$signatureloaded[19] = array("return path domain", $detail);
break;
case 21:
$signatureloaded[20] = array("return path domain verified", $detail);
break;
case 22:
$signatureloaded[21] = array("return path domain cname value", $detail);
break;
}
$x++;
}
?>

<!-- Result div start -->
<div class="result">
<h1 class="res">Result</h1>
<div class="user_info">
<ul class="info">
<?php
$x = 0;
foreach ($signatureloaded as $s) {
if ($x == 0 || $x < 5) {
echo "<div class='row'><li class='index_info'> $s[0] </li><li class='val'> : $s[1] </li></div>";
} else {
echo "<div class='row'><li class='index_info'> $s[0] </li><li class='val'> : XxXx----xxxxx----XxXx </li></div>";
}
$x++;
}
?>
</ul>
<div id="tabs-container">
<center><ul class="tabs-menu">
<h2 class="msg_history">Message History</h2>
<li class="current z"><a href="#tab-1">Today</a></li>
<li class="z" style="padding:0px;"><a href="#tab-2">Last 7 day's</a></li>
<li class="z" style="padding:0px;"><a href="#tab-3">Last 30 day's</a></li>
<li class="z" style="padding:0px;"><a href="#tab-4">Last 60 day's</a></li>
<li class="z" style="padding:0px;"><a href="#tab-5">Last 90 day's</a></li>
<li class="z" style="padding:0px;"><a href="#tab-6">All</a></li>
</ul></center>
<div class="tab">
<div id="tab-1" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "$year-$month-$day", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}

foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
?>
</ul>
</div>
<div id="tab-2" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$datetoday = date_create("$year-$month-$day");
date_sub($datetoday, date_interval_create_from_date_string("7 days"));
$d = date_format($datetoday, "Y-m-d");
$datt = explode("-", $d);
$year = $datt[0];
$month = $datt[1];
$day = $datt[2];
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "$year-$month-$day", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}

foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
?>
</ul>
</div>
<div id="tab-3" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$datetoday = date_create("$year-$month-$day");
date_sub($datetoday, date_interval_create_from_date_string("30 days"));
$d = date_format($datetoday, "Y-m-d");
$datt = explode("-", $d);
$year = $datt[0];
$month = $datt[1];
$day = $datt[2];
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "$year-$month-$day", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}

foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
?>
</ul>
</div>
<div id="tab-4" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$datetoday = date_create("$year-$month-$day");
date_sub($datetoday, date_interval_create_from_date_string("60 days"));
$d = date_format($datetoday, "Y-m-d");
$datt = explode("-", $d);
$year = $datt[0];
$month = $datt[1];
$day = $datt[2];
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "$year-$month-$day", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}
foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
?>
</ul>
</div>
<div id="tab-5" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$datetoday = date_create("$year-$month-$day");
date_sub($datetoday, date_interval_create_from_date_string("90 days"));
$d = date_format($datetoday, "Y-m-d");
$datt = explode("-", $d);
$year = $datt[0];
$month = $datt[1];
$day = $datt[2];
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "$year-$month-$day", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}
foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
?>
</ul>
</div>
<div id="tab-6" class="tab-content">
<ul class="tab-info">
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
$today = "$year-$month-$day";
$datetoday = date_create("$year-$month-$day");
date_sub($datetoday, date_interval_create_from_date_string("90 days"));
$d = date_format($datetoday, "Y-m-d");
$datt = explode("-", $d);
$year = $datt[0];
$month = $datt[1];
$day = $datt[2];
$client = new PostmarkClient("$serverapitoken");
$statsall = $client->getOutboundOverviewStatistics("tag1", "2006-01-01", "$today");
$stats = array();
$x = 1;
foreach ($statsall as $finalstatsall) {
switch ($x) {
case 1:
$stats[0] = array("sent", $finalstatsall);
break;
case 2:
$stats[1] = array("bounced", $finalstatsall);
break;
case 3:
$stats[2] = array("smtpapierrors", $finalstatsall);
break;
case 4:
$stats[3] = array("bouncerate", $finalstatsall);
break;
case 5:
$stats[4] = array("spamcomplaints", $finalstatsall);
break;
case 6:
$stats[5] = array("spamcomplaintsrate", $finalstatsall);
break;
case 7:
$stats[6] = array("tracked", $finalstatsall);
break;
case 8:
$stats[7] = array("opens", $finalstatsall);
break;
case 9:
$stats[8] = array("uniqueopens", $finalstatsall);
break;
case 10:
$stats[9] = array("withclientrecorded", $finalstatsall);
break;
case 11:
$stats[10] = array("withplatformrecorded", $finalstatsall);
break;
case 12:
$stats[11] = array("withreadtimerecorded", $finalstatsall);
break;
}
$x++;
}
foreach ($stats as $statistics) {
echo "<li class='index'>" . $statistics[0] . "</li><li class='val'> : " . $statistics[1] . "</li><br/>";
}
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Result div End -->
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
$("#submit").click(function(event) {
var POSTMARKkey = jQuery('.postmark-api-key').val();
if (POSTMARKkey == "") {
event.preventDefault();
alert('Please insert POSTMARK API Key!!!');
}
});
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
</script>
</body>
</html>
?>

Style.css

Includes basic styling of HTML elements.

@import url(http://fonts.googleapis.com/css?family=Raleway);

#main{
width: 100%;
margin:50px auto;
font-family:raleway;
position: relative;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
ul{
text-decoration: none;
}
ul li{
display: inline-block;
}
div#login{
width:330px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin: 70px auto 0 auto;
}
input[type=text],input[type=email]{
width:100%;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
margin-top: 5px;
}
a#demo_key {
float: right;
margin: 10px;
}
textarea{
width: 100%;
}
div#main h1 {
text-align: center;
}
h1.res {
margin-top: 51px;
}
div#login h2 {
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
div.user_info {
width: 750px;
position: relative;
background-color: #FEFFED;
padding: 5px;
border:1px solid #D5D89B;
border-radius: 10px 10px 5px 5px;
margin: 30px auto;
}
.info li {
padding: 5px;
font-size: 18px;
}
.tabs-menu {
height: 30px;
float: left;
clear: both;
}
.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
background-color: #FFBC00;
border: 1px solid #d4d4d1;
}
.tabs-menu li.current {
position: relative;
background-color: #fff;
z-index: 5;
}
ul.tab-info {
margin-top: 90px;
}
li.index_info{
width: 50%;
text-align: left;
font-weight: bold;
}
li.index {
width: 30%;
text-align: left;
font-weight: bold;
}
ul.tab-info li {
padding: 5px;
font-size: 16px;
}

.tabs-menu li a {
padding: 0px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.tabs-menu .current a {
color: #2e7da3;
}
.tab {
border: 1px solid #d4d4d1;
background-color: #fff;
width: auto;
}
.tab-content {
text-align: center;
padding: 20px;
display: none;
}
ul.tabs-menu {
width: 100%;
}
#tab-1 {
display: block;
}
h2.msg_history{
text-align:center;
margin-top: -10px;
margin-bottom: 0;
padding: 15px;
margin-left: -120px;
background: none;
}
@media only screen and (max-width:480px){
div.user_info{
width: 100%;
min-width: 300px;
}
#main{
min-width: 300px;
}
.tabs-menu li {
clear: both;
float: none;
margin-left: -4px;
}
li.index {
width: 90%;
margin-left: -50px;
}
h2.msg_history {
margin-top: 0;
}
ul.tab-info {
margin-top: 170px;
}
}
.z{
width:110px;
}

Run the script and enjoy!!!

Conclusion :

Hope you have enjoyed this blog and will definitely try this script in your application. We will be back soon with some new coding tricks. Must send us your feedback in the space provided below.