Help Chỉnh kích thước sidebar theo kích thước màn hình

duylong676

Private
Tham gia
04/08/2016
Bài viết
12
Được Like
5
Chào mọi người!
Hiện tại mình đang làm forum nhưng thấy trang bên Nhatrangclub làm hay quá mình muốn làm theo. Bạn nào biết chỉ mình với?

1. Quảng cáo

Nếu giao diện desktop mở rộng full thì quảng cáo xuất hiện ở Ad_header
Zalo_ScreenShot_25_7_2018_714925.png

Chuyển sang giao diện nhỏ hơn hoặc trên Mobile thì nó chuyển xuống phía ad_breadcum

Zalo_ScreenShot_25_7_2018_715598.png


2. Sidebar

Độ rộng hiển thị ở sidebar chạy theo kích thước màn hình
Zalo_ScreenShot_25_7_2018_74160.png
Của bên bạn nhatrangclub thì hiện rộng thế này
Zalo_ScreenShot_25_7_2018_715838.png


Ai giúp mình với nè! thanks nhiều
 

hinte65

Private
Tham gia
19/07/2018
Bài viết
1
Được Like
1
mình cũng mới làm xen đc vài ngày, góp ý giúp bạn xíu

1. Quảng cáo

cái này trang bạn nói chỉ ẩn hiện thôi.
Muốn làm giống vậy bạn tạo 2 cái quảng cáo html :
  • 1 cái cho Container breadcrumb (top): Above
  • 1 cái cho Container header
nội dung html vd từ nhatrangclub:
----------
<div id="bannerTopLogoMobile">
<a href="Your post count not enough to post link. Required 5 post(s)" title="Phở Gốc - 40 Yết Kiêu - Nha Trang" target="_blank">
<img src="Your post count not enough to post link. Required 5 post(s)" alt="Phở Gốc - 40 Yết Kiêu - Nha Trang">
</a>
</div>
-----------

kế tiếp bạn vào template thêm vào extra.less
--------------------
@media (min-width: 650px) {
#bannerTopLogoMobile{
display: none;
}
}


--------------------

650px là kích thước nhỏ nhất để template chuyển qua dạng mobile



2. Sidebar

cũng đang muốn biết :?
 

duylong676

Private
Tham gia
04/08/2016
Bài viết
12
Được Like
5
2. Sidebar

cũng đang muốn biết :?

Cũng làm giống bạn luôn nhờ bạn chỉ mình cũng đã mò ra nè
tuy nhiên cho đoạn này vào sidebar.css

Tìm đoạn này:

@media (max-width:340px)
{
.Responsive .sidebar
{
width: 100%;
}
}

Thay bằng đoạn này:

@media (max-width:800px)
{
.Responsive .sidebar {
width: 100%;
float: none;
margin: 0 auto
}
}
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom