Responsive CSS

Để có kết quả mong muốn, bạn có thể:

• Dùng !important nhưng không recommend cách này lắm vì nó có độ-ưu-tiên-cao-nhất, sau này muốn ghi đè rất khó hoặc tiếp tục phải lạm dụng !important.
• Sử dụng selectors có CSS specificity (Độ ưu tiên) bằng-hoặc-cao-hơn selector cần ghi đè.

Về cách thứ 2:

Ban đầu content selector được bạn gọi từ các thẻ cha .hero-banner .slider .slide .content-holder .content (dòng 78) có độ ưu tiên là 0-0-5-0).

Xuống dòng 466 thì content selector được gọi là .content, có độ ưu tiên là 0-0-1-0 (thấp hơn 0-0-5-0).

⇒ Đó là lý do position và left không thể override các giá trị mới như hình.

Để sửa lại, bạn có thể tiếp tục gọi .hero-banner .slider .slide .content-holder .content trong đoạn css responsive hoặc chỉ gọi .content ở CSS ban đầu thôi, chẳng hạn vậy.

Để hiểu rõ hơn về CSS-overriding, bạn có thể tìm hiểu thêm từ khóa: CSS Specificity và Cascading CSS nhé .

Dùng !important như cách trên, hoặc dùng lại đúng các class cha chứa .content, ở đây là .hero-banner .slider .slide .content-holder .content

Đằng sau từng thuộc tính bác thêm !important vào xem. Ví du:

display: block !important;