Image in Bootstrap not showing up on smaller devices

I am facing an issue where an image displays properly on desktop view but turns into 0x0 dimensions when viewing from a mobile device. I have been unable to determine the root cause of this problem. The website is built using Bootstrap 4 and you can observe the issue on this page:

Mobile view
https://i.sstatic.net/e79w6.png

Desktop view
https://i.sstatic.net/q9ySk.png

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>
htmlcssimagebootstrap-4

Answer №1

The reason for this is due to the use of padding: 3rem !important.

To enhance this, consider implementing a min-height or min-width and adjusting your padding specifically for larger screen viewports.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to apply a blur effect to just the div itself without affecting its contents

<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...

htmlcss

Guide on showcasing html and css in a preview using a Data URL

Currently, I have implemented two tab interfaces: one for entering HTML text and another for inputting CSS content. Following this, I have included a Preview section to visualize the combined output of both HTML and CSS elements. However, I am encountering ...

javascripthtmlcssnode.js

Unable to automatically prompt the button inside the iframe

In this scenario, an Iframe is automatically generated by a JavaScript script. I am looking to simulate a click by triggering a button, but unfortunately, it is not working as expected. You can view the code on JSFiddle. I have attempted various approache ...

javascriptjqueryhtmliframe

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

htmlcss

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

javascripthtmlimage

Opposing the fill attribute with the current color

Is there a way to reverse or eliminate the effect of fill: currentColor? .svg-icon * { /* Targeting all sub-elements to customize icons with a specific color */ fill: currentColor; } .svg-icon.iconLogoGlyph * { /* How do I cancel out fill: curren ...

csssvg

Looping through iterations to create circular patterns

How can I fix my code to draw multiple circles in a loop instead of just one? var ss_links_canvas = document.getElementById("ss_links_canvas"); ss_links_canvas.width = images.length * 41; ss_links_canvas.height = 25; var ss_links = ss_links_canvas.getCont ...

javascripthtmlhtml5-canvas

Exclusively Bootstrap-Timepicker

Is there a way to create a textbox with a time picker only? I am looking for guidance on how to do this using the following example: http://jsfiddle.net/RR4hw/11/ jQuery("#startDate").on("dp.change",function (e) { jQuery('#endDate').data("DateTi ...

htmltwitter-bootstrapcssdatepickertimepicker

Having difficulty locating the value in the input search field

I am attempting to customize my search bar so that it automatically includes wildcards on both ends when a user performs a search. Although the code below almost does what I want by adding the wildcards on both sides, it adds them to an empty search term ...

javascriptjqueryhtml

"Revolutionizing the way we navigate: Angular's innovative

Presently, my focus is on incorporating route transitions into my project. I've employed a component that appears on click and triggers the corresponding service function: routeTransition(destination) { if (this.router.url !== destination) { t ...

htmlcssangulartypescriptangular-animations

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

javascripthtmlcss

Troubleshooting issue with Django development server causing HTML5 video element to become non-seekable

My Django app is currently serving a webpage with an HTML5 video element, but I've encountered a strange issue. The video.seekable property is returning a timeRanges object with a length=0, when it should actually be length=1. Unfortunately, this mea ...

javascriptpythondjangohtmlhtml5-video

The route you are trying to access is currently unavailable

I've successfully developed a web app, and now I need to replicate the same HTML page with a slightly different controller. Despite my attempts to utilize ngRoute, it's not functioning as expected, and I'm uncertain if my route setup will yi ...

javascripthtmlcssangularjsangular-ui-router

Unveiling the Magic: Transforming Objects into HTML Attributes using AngularJS

I have been working on developing a highly dynamic ng directive that creates tables based on a given data array and configuration object. I am looking for a way to assign attributes dynamically based on an object within the scope. For example, if I have an ...

javascriptangularjsangularjs-directivehtml

Prevent the movement of the first column in a table when rearranging rows up or down by utilizing

Feeling a bit stuck here, can't seem to figure out what I've missed. I've managed to move up or down a row in a table, but I need the value of the cell in the first column to remain unchanged. Here's my code: This is my HTML file: &l ...

javascripthtmlcssangularjs

HTML: div element with a compact size

Is there a way to establish a minimum height for a div that also adjusts as new data is added? ...

htmlheight

Is it appropriate to incorporate the new <main> element in HTML5 yet?

Back on the 16th of December, a new HTML5 extension specification was sent off to the W3C for review. This extension focuses on the <main> element and you can check it out here. Here's a summary: This particular spec builds upon the existing HT ...

htmlsemantic-markupspecifications

What could be the reason for Bootstrap failing to display properly on my website?

I just started my journey in web development and decided to create my first website using Flask. However, when I tried running the website for the first time, Bootstrap wasn't working properly. Upon inspecting the site, I noticed some errors popping u ...

pythonhtmlflaskbootstrap-4

Rows in a table materialize and fade away

Why does the row show for less than one second and then disappear when I click on the button? Everything works fine when I delete the form tag. How can I make it work without having to delete the form tag? Check out the code below: <html> <head ...

javascripthtmlasp.net

Changing the background color using ReactJS

After streamlining my project to focus on the main issue, I am still facing a problem. Here is the relevant code snippet: .App{ background-color: aqua; } .AboutMe{ color:blue; background-color: yellow; } This is from App.js: import logo from '. ...

htmlcssreactjs