One of the main challenges I'm facing is that the contents inside the bootstrap columns are not scaling properly to fit the size of their respective columns.
Here's the layout I'm aiming for: 1
This page consists of two separate columns:
Left column (c-carousel column): a bootstrap image carousel
Right column (gm-group members column): name and picture of each member of the group
- The right column is divided into 1 title row and 10 additional rows, each containing two columns
Each main column is set to "max-height: 100%; max-width: 100%;", however, their contents (carousel and group members columns) do not adhere to these dimensions. The content in either the c column or gm column extends beyond the height of the other column on larger or smaller screens, resulting in blank spaces like the yellow area below. Although I've adjusted the gm column's content to fit within its dimensions, there is still overflow which I've hidden, but this solution requires scrolling to view the last member.
I'd prefer the carousel to crop images as needed to fit within its constraints and have the group members column's content adjust to fit the column without necessitating scrolling through members. Unfortunately, after trying for three days, I'm unsure how to achieve this. Thank you in advance for any assistance.
Here is the relevant code:
// CSS styles here...
</style>
</head>
<body>
<div class="container-fluid">
<?php include 'navigation.php';?>
</div>
<div class="row no-gutters">
<div class="col-lg-9 col-xs-12" style="padding-right: 0px; max-width: 100%; max-height: 100%; background-color: yellow;">
// Bootstrap carousel code here...
</div>
<div class="col-lg-3" id="fullnamediv" style="max-width: 100%; max-height: 100%; overflow: auto;">
// Group members display code here...
</div>
</div>
p.s. Please excuse any duplicate or unused sections in the code; I plan to optimize it later. Thank you once again for your help :)