تطبيقات bskin-head
جعل نماذج بلوجر متجاوب مع جميع الأجهزة
ابحث عن هذا الوسم
<head>
تحتـه
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
البحث عن
]]></b:skin>
فوقـه
- اقتباس :
- @media screen and (max-width : 750px) {
body {min-width: 100% !important;}
.content-outer.bzcontain {
max-width: 100% !important;
min-width: 100% !important;
overflow: hidden;
width: 100% !important;
}
.content-inner {
margin: 0 auto;
overflow: hidden;
width: 98%;
}
.bzomcmain {padding: 0 !important;}
.region-inner.main-inner {padding: 10px !important;}
.comment-link,.post-comment-link::before {display: none;}
.bzsidebar {
float: right !important;
margin: 10px auto !important;
right: 0 !important;
width: 100% !important;
}
.sidebar.section {margin: 0 !important;}
.column-left-inner {padding: 0 !important;}
.sidebar .widget {margin: 0 -4px 20px !important;}
.post-outer {overflow: hidden;}
}
وبعد ذلك نبحث عن الكود التالي
<div class='content-outer'>
ونضيف له هذه الكلمة bzcontain ليصبح با الشكل التالي
<div class='content-outer bzcontain'>
وبنحث أيضا عن الكود التالي
<div class='columns fauxcolumns'>
ونضيف له هذه الكلمة bzomcmain ليصبح با الشكل التالي
<div class='columns fauxcolumns bzomcmain'>
وأخيرا نبحث عن الكود التالي
<div class='column-left-outer'>
ونضيف له هذه الكلمة bzsidebar ليصبح با الشكل التالي
<div class='column-left-outer bzsidebar'>
وجرب تجاوب القالب وسوف تجده متجاوب 100/100
وهذا قالب من نماذج بلوجر جربت عليه التجاوب