Lỗi giao diện mobile xenporta

buidam · 14/5/15

e mới học làm diễn đàn bằng xenforo, thấy style xenporta span.vn đc chia sẻ trên mạng, lấy về làm thì giao diện trên laptop ko sao, còn trên điện thoại thì lại bị như thế này:

bác nào biết chỉ e vơi

vanluong2608 · 14/5/15

buidam said: ↑

e mới học làm diễn đàn bằng xenforo, thấy style xenporta span.vn đc chia sẻ trên mạng, lấy về làm thì giao diện trên laptop ko sao, còn trên điện thoại thì lại bị như thế này:

bác nào biết chỉ e vơi
Click to expand...

Bạn căn hình lại đi thường giao diện mobile có with nhỏ hơn nên chuyển sang bạn phải sửa lại css

Bcat9505 · 14/5/15

style đó lúc đó chưa có thịnh hành responsive nha, bạn có thể tự hoặc nhờ responsive với 320px và 480px

buidam · 14/5/15

mình dùng style này, các bạn xem hộ mình với
EWRblock_RecentNews.css

.EWRporta_Portal .breadBoxTop, .EWRporta_Portal .titleBar {display: none;}
.header_rc{border-bottom:4px solid #666;position:relative;width:auto}/*#0093cb #006d96*/
.title_rc{background:#333;color:#fff;float:left;font-size:15px;padding:10px;position:absolute;text-transform:uppercase;top:-39px}
#recentNews{background:#fff;border:1px solid #ccc;margin-top:15px;padding-top:30px}
.page_count{background:none;border:none}
.EWRporta_Portal .breadBoxBottom{display:none}
.postedStat .views,.postedStat .likes,.postedStat .comments{float:left;padding-right:25px;padding-top:3px}
.postedStat .views span{background:transparent url(/images/icon.png) no-repeat -135px -7px;float:left;font-size:13px;height:15px;padding-right:10px;width:19px}
.postedStat .likes span{background:transparent url(/images/icon.png) no-repeat -174px -67px;float:left;font-size:13px;height:15px;padding-right:0;width:19px}
.postedStat{padding-bottom:10px;padding-left:10px;padding-top:10px}
.recentNews .messageContent .comments span{background:transparent url(/images/icon.png) no-repeat -173px -7px;float:left;font-size:13px;height:15px;padding-right:5px;width:19px}
.recentNews .messageContent .comments a{color:#3A3A3A!important;font-weight:400!important}
.LeftMenuFix{margin:0 auto;width:1000px}
.LeftMenu_wrp{background:#fff;float:left;margin-left:0;margin-right:10px;margin-top:15px;width:130px}
/* .item_lmn{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;padding:8px 10px;text-align:center}
.item_lmn:hover{background:#f1f1f1}
.title_lmn1 .item_lmn{background:#0093cc;color:#fff}
.title_lmn2 .item_lmn{background:#e75218;color:#fff}
.LeftMenuFixed{margin-left:-140px;margin-top:-3px;position:absolute;width:135px!important}*/
.clearFix{clear:both}
.HotBlock{float:left;margin-top:0;width:100%}
.HotBlock_wrp{background:none repeat scroll 0 0 #FFF;border:1px solid #CCC;margin-top:15px;padding-top:30px}
.HotBlock_ct{padding:20px 0 0}
.header_hb .title_rc{background:#444}
.HotBlock_items{float:left;height:100px;overflow:hidden;padding-bottom:20px;padding-left:20px;width:320px}
.img_items{display:block;float:left;height:95px;overflow:hidden;padding-right:10px;width:95px}
.img_items img{min-height:95px;width:95px}
.ct_items{float:left;width:205px}
.title_items{color:#444!important;display:block;font-size:15px;font-weight:700;max-height:58px;overflow:hidden;text-align:justify;width:205px}
.info_items{color:#666!important;font-size:12px;width:190px}
.lmn_bock02 .fb-like,.lmn_bock02 .plusone{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;margin:0!important;padding:8px 10px;text-align:center}
.thread_view .HotBlock{margin-bottom:10px;margin-right:310px;margin-top:-10px;width:auto}
.EWRporta_Portal .PageNav{padding-top:10px}
.titleBar h1{margin-top:10px}
.cms_congnghe_img{float:left;height:170px;overflow:hidden;width:270px}
.right_ct{margin-left:280px}

.bbCodeQuote{margin-right:10px!important}
.subHeadingportal{-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;font-weight:700;margin:0 0 5px;overflow:hidden;padding-bottom:2px;text-align:left}
.subHeadingportal .newsTitle{color:#444;font-family:Tahoma, Geneva, sans-serif;font-size:16px;line-height:24px}
.recentNews .leftDate .newsText{font-size:13px;margin-left:0!important;text-align:justify}
.recentNews .leftDate .newsText iframe{max-width:550px;width:auto}
.cn_message{padding-bottom:0!important}
.cn_message .fb-comments{margin:0 auto}
.cnfacebookLike{padding:15px 10px 10px}
.sectionFooterportal{color:#65a5d1;font-size:11px;line-height:16px;padding:4px 10px}
.sectionFooterportal a{color:#65a5d1}
.primaryContentportal{background-color:#FFFFF;padding:10px}
.primaryContentportal a{color:#176093}
.sectionMainportal{background:#fff;border-bottom:1px solid #D9D9D9;float:left;margin:0!important;padding:20px}
.widget-container .secondaryContent a,.widget-container .userTitle a{font-weight:400}
.cms_congnghe_img a:hover img {
margin-left: -5%;
width: 110%;
}
.cms_congnghe_img a img {
transition: all 0.2s ease 0s;
width: 100%;
}
.recentNews .subHeading { margin: -10px -10px 10px; }
.recentNews .subHeading a { color: #444444 !important; }
.recentNews .subHeading h2 { font-size: 1.5em; }
.recentNews .messageUserBlock { float: right; margin-left: 10px; }

.recentNews .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }
.recentNews .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }
.recentNews .newsDate .newsDay { font-size: 26px; }

.recentNews .leftDate .newsDate { margin-left: -45px; }
.recentNews .leftDate .newsText { margin-left: 25px; }

.recentNews .messageContent { font-size: 13px; }
.recentNews .messageContent .postedBy a{color:#666;}
.recentNews .messageContent .postedBy { font-size: 12px; padding-bottom: 5px;padding-top: 0px; }
.recentNews .messageContent .username { font-weight: bold; color:#0093cb !important;}
.recentNews .messageContent .comments { float: left; font-weight: bold; }
.recentNews .messageContent .clearFix { clear: right; }

.recentNews .iconKey div
{
background: transparent url('styles/baisik/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
width: 16px;
height: 16px;
float: left;
margin-right: 4px;
}
.recentNews .iconKey .sticky { background-position: 0px -16px; }
.recentNews .iconKey .redirect { background-position: -48px -16px; }
.recentNews .iconKey .new { background-position: -64px -16px; }

.recentNews .sectionFooter { margin: 10px -10px -10px; text-align: right; position: relative; }
.recentNews .sectionFooter .continue { padding-top: 5px; font-size: 12px; }
.recentNews .sectionFooter .continue .redirect { margin: 3px 4px 0px 0px; }

.recentNews .sectionFooter .categories { padding-top: 5px; float: left; }
.recentNews .sectionFooter .categories li { display: inline; }

.recentNews .sectionFooter .sharePage { position: absolute; }
.recentNews .sectionFooter .shareControl { margin-top: 6px !important; }
Click to expand...

kiến thức của mình gà quá từ hôm qua đến giờ loay hoay mãi không biết phải làm sao, đi tìm hiểu thì có thấy responsive, botstrap nhưng mà cũng không biết dùng

buidam · 14/5/15

có ai biết responsive sửa hộ css với

Lỗi giao diện mobile xenporta

buidam New Member

vanluong2608 Member

Bcat9505 Moderator Staff Member

buidam New Member

buidam New Member

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất