Cần hướng dẫn cách đặt độ cao tự động cho đoạn văn

[Hoa_Quach]

Chào mọi người !
Em đang vừa học CSS và vừa thử những gì được học qua.
Em có thử làm một trang CSS chạy Marquee, trong đó phía trái là một bức ảnh với độ rộng 150px và bên phải là đoạn text.
Em đang vướng ở vấn đề là giữa đoạn 1 và đoạn 2 làm cách nào để nó có thể tự động phân cách độ cao khi mình xem trên các màn hình độ phân giải khác nhau ạ? Em thử làm mọi thứ hiển thị OK trên màn hình máy tính, nhưng khi xem trên mobile thì lại dính chữ giữa các đoạn lung tung.

Hiển thị trên máy tính:

Hiển thị trên điện thoại:

Em xin cảm ơn nhiều ạ.

[yuh (Huy)]

Tìm hiểu về “responsive web design”… dùng các thứ như flexbox, grid, css media query…

Responsive web design basics

[Lovemagic]

nhìn vào thì hình như do text bị tràn khỏi khung. Nếu như đúng thế thì bạn chỉ cần nhét thêm nhiều text vào là web cũng bị, chưa cần tới mobile.

Góp ý với bạn là với những thứ có thể hoạt động đc trên web, bạn nên đưa thẳng vấn đề = cách upload lên cho nó chạy (nó chạy nhé, chỉ đừng có up code để mọi người chỉ đọc được)
Ví dụ web như của bạn thì copy html, css, js vào trong codepen, rồi gửi mọi người xem luôn đc lỗi

[Hoa_Quach]

@yuh Dạ em cảm ơn anh ạ. Em đang đọc link anh gửi, đúng là nhiều cái em chưa biết

@Lovemagic Mình cũng vừa mới học mò nên không rõ vụ này, mình vừa tìm hiểu và đưa thử code lên, nhờ bạn và mọi người xem giúp:

https://codepen.io/hoaquachsd/pen/dyMRPyP

[Lovemagic]

như mình đã nói đấy, bạn làm cho text dài ra là nó cũng bị lỗi luôn ở trình duyệt thường, không cần phải đợi tới lúc lên mobile đâu.

Fix cái này thì bạn cho class doanvan thuộc tính position: relative là đc, tất cả child của relative sẽ nằm trong khung của nó
Việc bạn để min-height và overflow là vô nghĩa, vì bạn chỉ giới hạn min-height tương ứng với việc max-height có thể là dương vô cùng, nên overflow k xảy ra

[Hoa_Quach]

Ban đầu mình cũng đã thử đưa thuộc tính position: relative vào class “doanvan”, nhưng khi apply thì toàn bộ code không chạy. Thật sự do mới học nên mình không rõ có phải bị đụng code không, chưa tìm ra được nguyên nhân.
Nhưng nếu để min-height thì đoạn code lại hoạt động.
Cảm ơn sự giúp đỡ và hướng dẫn của bạn

[Lovemagic]

cũng góp ý với bạn là bạn đã thử thế nào, code ra sao, thì bạn nên nêu hết ra
chứ cứ nói “không chạy” thì không biết đằng nào mà lần.

với link codepen bạn đưa thì mình để position relative là nó vào khung, nên mình hướng dẫn bạn vậy, câu trả lời của bạn khiến mình cảm thấy như kiểu mình hướng dẫn sai vậy, mình biết bạn k có ý đấy, nhưng đây là góp ý để bạn dần dần tạo thói quen đặt câu hỏi cho gãy gọn hơn.