Bootstrap image not displaying on smaller screens

Question

I have an image that gets displayed properly on desktop view, but becomes 0x0 when browsing from mobile. I can't seem to crack the cause of this one. The site is running Bootstrap 4 and the issue can be seen here: https://clonegram.ritvars.lv/profile/demouser

Mobile view

Desktop view

Code

<div class="row">
    <div class="col-3 p-5">
        <img src="{{ $user->profile->profileImage() }}" class="rounded-circle w-100">
    </div>
    <div class="col-9 pt-5">
        <div class="d-flex align-items-center">
            <h1 class="mr-4">{{ $user->username }}</h1>
            ...
        </div>
        ...
    </div>
</div>

Answer 1

That's because of padding: 3rem !important .

You can improve it by having, some min-height or min-width and setting your padding just for larger viewport screens.