<div class="row justify-content-center mob-view" >
<div class="col-lg-3 col-md-4" *ngFor="let slide of specialization">
<div class="brower-box">
<div class="brower-image"> </div>
</div>
</div>
</div>
@media(max-width :768px){
.mob-view{
min-width: 100%;
display: flex ;
flex-direction: row;
overflow-x: auto;
flex-wrap: nowrap ; } }
When looking at the provided HTML code, there is a loop created by ngFor that populates the div with the class "brower-box" with about 31 elements. These elements load correctly on various devices and viewports. However, the goal is to have these elements scroll horizontally within a mobile view. CSS properties like flex and overflow were applied to achieve this.
ISSUE
While applying flex and overflow achieved the desired horizontal scrolling effect, only the elements starting from the 16th position were accessible for scrolling. Initially, scrolling left was not possible as it started directly from the 16th element towards the right. Scrolling back from the 31st to the 16th element worked, but going further left to access elements 1-15 was not allowed. Despite all 31 elements being loaded inspecting through Chrome DevTools, accessing them via scrolling was restricted. Any insights on what might be causing this limitation would be greatly appreciated.