CODEWITHSUNDEEP
htmlcssreactjsbootstrap-5
Fatima Khan
Fatima Khan

Reputation: 43

Bootstrap columns overlapping on small screen size

I made two columns, one for title and the other one for projects, which I made scrollable. It works as I want on desktop view, but when I shrink the viewport to mobile screen and try to scroll through the projects, they start overlapping the title. Here's the link for the problem: text. Try to scroll with the viewport shrunk to 500 width.

I tried playing with the height of the projects column but it still does it. If you need the code let me know I'll add that as well.

Upvotes: 1

Views: 793

Answers (1)

burkay
burkay

Reputation: 1170

You gave the parent container of those columns row row-cols-1 row-cols-md-2 classes. Starting with medium width and going up (lg, xl), you made it to be two columns. For xs and sm width, it uses row-cols-1 which makes it single column. Remove row-cols-1 class and you will get two columns in all sizes.

Upvotes: 1

Related Questions