CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Little Code
Little Code

Reputation: 1545

Keeping Bootstrap columns within viewport

I am working on a Bootstrap project that uses columns, cards and justify-content-between to spread things out evenly.

The problem I am seeing is that on medium size breakpoints (e.g. iPads), the right-most card overflows off-screen.

I want to avoid the need for the user to scroll horizontally and so want to keep all content within the visible viewport.

Sample code : https://codepen.io/6a0a49af-a3f9-4e78-8ccf-91d8d1b1f102/pen/QWKYJqM

Screenshot below:

enter image description here

Upvotes: 1

Views: 146

Answers (1)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Can you please check the below code link? Hope it will work for you. You need to apply max-width: 100%; to the .gscustomwidth. This issue arrives because the width given by you is more than its parent element.

Please refer to this link: https://jsfiddle.net/yudizsolutions/ahdrpckw/2/

Upvotes: 1

Related Questions