The responsiveness of the bootstrap mobile view is experiencing some technical difficulties

https://i.sstatic.net/IuQXa.pngUsing Bootstrap 4 in my project and I have implemented the following bootstrap codes with an external CSS file in the HTML view,

<div class="jumbotron rounded-0">
  <div class="container">
  <div class="row">
    <div class="col-md-4">
    <img src="{{asset('images/flowler.jpg')}}" alt="..." class="rounded-circle">
    </div>
  </div>
 </div>
</div>

External CSS

.rounded-circle{
    vertical-align: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: -100%;
    top: -50px;
    
  }

However, when viewing on mobile devices, the images are not displaying properly and are not positioned correctly. How can I resolve this issue?

1: https://i.sstatic.net/daggf.png`enter codehttps://i.sstatic.net/IuQXa.png here`

Answer №1

When you set the value to left: -100%;, you are effectively pushing the image off the page

  .rounded-circle{
    vertical-align: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
<!DOCTYPE html>
<html>
<head>
<title>Demo of HTML, CSS and JavaScript</title>
</head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<body>
<!-- Begin coding -->

  <div class="jumbotron rounded-0">
    <div class="container">
    <div class="row">
      <div class="col-md-4">
      <img src="https://www.ivertech.com/Articles/Images/KoalaBear200x200.jpg" alt="..." class="rounded-circle">
      </div>
    </div>
   </div>
  </div>

<!-- End coding -->
</body>
</html>

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

What is the best way to align two blocks and a span with fixed widths horizontally using CSS?

Is it possible to have a span with a static width of 20px (like col-2) placed between two blocks with content in Bootstrap, where the blocks split the rest of the available space? Here is an example code snippet: https://jsfiddle.net/Alexik/krexqp5m/1 Co ...

Issue with Bootstrap 4 Webpack Sass functionality failure

Encountering a problem with Webpack and Bootstrap 4 mixins and functions. sass|css loader: { test: /\.(sa|sc|c)ss$/, use: [ // fallback to style-loader in development // which creates style nodes from JS strings (IE: imports) ...

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

What is the best way to align an image in the middle of an image slider within a Bootstrap

Struggling to align the image properly in a Bootstrap 5 image slider carousel: https://i.sstatic.net/upPza.png <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class=&qu ...

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

Implement feature to enable selection using jQuery

I have a question about implementing an <option value="fiat">Fiat</option>"> element into a dropdown list using jQuery. I've tried the code below and encountered some issues. When I click the button, I want to add the <option value= ...

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

WebGl - texture failed to load

I encountered an error message stating: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/.../img.jpg may not be loaded. var scene, camera, renderer; var ...

Gradually shifting alignment of Bootstrap tooltips

I am encountering an issue with Bootstrap tooltips They seem to be progressively off-center Below is the code I am using for the icons {{#each guilds}} <div class="col-sm-1"> <a href="/dash/{{this.id}}"> <div class="gicon"> ...

The autocomplete feature is not displaying the data in the Bootstrap modal, only the list is visible

Having trouble with autocomplete in the bootstrap modal. The search for a book only shows black dots. Any solutions to this issue? As shown in the image, I've attempted to use CSS z-index but the problem persists. https://i.sstatic.net/e1ga9.png publi ...

Switching the navbar state from a regular mode to a collapsed mode can be done manually

I need help with my navbar design: <nav class="navbar fixed-top navbar-expand-sm navbar-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle=&q ...

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

Is there a way to prevent jQuery's .after() from modifying the HTML I'm trying to insert?

Trying to divide a lengthy unordered list into smaller segments using the following code: $('.cList').each(function() { var thisList = $(this).find('li') var thisLen = thisList.length for(var x=0;x<thisLen;x++) { ...

CSS that adjusts to screen size for horizontal scrolling

I'm attempting to implement a horizontal scroll on a webpage so that vertical scrolling will result in horizontal movement. I came across some CSS-based code on CodePen that accomplishes this, but unfortunately it's not responsive. Is there a wa ...

Filtering Completed: Table Returned

Recently, I worked on a fun project where I organized JSON wine data into a table and created an object that defines various wines along with their attributes like color, taste, and body. The main objective: When clicking the red button, I want a function ...

Message form with HTML and PHP

Currently, I am developing an HTML form that utilizes PHP to send an email message. While testing in MAMP, I am encountering an issue where I am not receiving a response after clicking on the "send message" button. Any suggestions or guidance on how to res ...

Using Selenium to scrape eBay's website

Hello, I am completely new to coding and currently working on a project that involves scraping data from eBay using selenium. Throughout this process, I have encountered two main challenges. The issue arises with the XPath for the listing name, which ...