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

Thảo luận trong 'Other Resources' bắt đầu bởi duylong676, 25/07/2018.

  • Google checker:
  1. duylong676

    duylong676 Thượng Đế

    Tham gia:
    04/08/2016
    Bài viết:
    12
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    phú quốc
    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
     
    Quan tâm nhiều
    Bài viết mới
    Tags:
    hinte65 thích bài này.
  2. hinte65

    hinte65 Thượng Đế

    Tham gia:
    19/07/2018
    Bài viết:
    1
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    HCM
    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 thích bài này.
  3. duylong676

    duylong676 Thượng Đế

    Tham gia:
    04/08/2016
    Bài viết:
    12
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    phú quốc
    cảm ơn bạn rất nhiều nha!!
     
  4. duylong676

    duylong676 Thượng Đế

    Tham gia:
    04/08/2016
    Bài viết:
    12
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    phú quốc
    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
    }
    }
     
    hinte65 thích bài này.

Chia sẻ trang này

Đang tải...