Set Responsive Width For Linkedin Company Profile plugin
Question
I want to use LinkedIn Company Profile plugin in my responsive website. I have added the data-width="300" for desktop view, now I want to set some different width value for tablet and mobile devices.
Can anyone help me on how can I set different values in data-width for different views.
1 answers
solution1
2 ACCPTED 2015-04-22 09:40:46
Here is an example of what you can do :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
@media screen and (max-width:760px) {
#linkedinXsSmall {display: block;}
#linkedinSmall {display: none;}
#linkedinMedium {display: none;}
#linkedinDesktop {display: none;}
}
@media screen and (min-width:761px) and (max-width:960px) {
#linkedinXsSmall {display: none;}
#linkedinSmall {display: block;}
#linkedinMedium {display: none;}
#linkedinDesktop {display: none;}
}
@media screen and (min-width:961px) and (max-width:1280px) {
#linkedinXsSmall {display: none;}
#linkedinSmall {display: none;}
#linkedinMedium {display: block;}
#linkedinDesktop {display: none;}
}
/* apply to all larger devices */
@media screen and (min-width:1281px) {
#linkedinXsSmall {display: none;}
#linkedinSmall {display: none;}
#linkedinMedium {display: none;}
#linkedinDesktop {display: block;}
}
</style>
</head>
<body>
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<div id="linkedinXsSmall">
<script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="200px"></script>
</div>
<div id="linkedinSmall">
<script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="400px"></script>
</div>
<div id="linkedinMedium">
<script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="600px"></script>
</div>
<div id="linkedinDesktop">
<script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="1000px"></script>
</div>
</body>
</html>
Also don't forget to use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in your page so that the content is scaled appropriately on devices with high pitch.
I've choosen this solution because it's quick to set up and easy to understand. To my mind it should be also possible to do it with a javascript that would initialize data-with but it is a bit more tricky.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.