What causes my elements to move to the left when the screen size decreases with bootstrap?

If you want a better understanding of the situation, looking at images might be helpful.

Here is how it typically appears:

https://i.sstatic.net/mBZDp.jpg

And this is how it appears on smaller screens:

https://i.sstatic.net/8CuIs.jpg

For smaller screens, my preference would be to center the image and display the text below. I attempted using flexbox and aligning to the center, but encountered issues. Here's my code for reference: https://codepen.io/pierresarrailh/pen/MWoZMav

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190e0b270c050b07">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Content -->
<div id="landing-page" class="d-flex flex-row justify-content-center">
  <div class="align-self-center col-lg-8">
    <div class="d-flex flex-wrap row align-content-center">
      <div class="col-lg-6">
        <img id="profile-pic" src="https://picsum.photos/300" alt="Card image cap" style="width: 300px; height: 300px;">
      </div>
      <div class="col-lg-6" id="intro-text">
        <h2> Hi there! Nice to meet you!</h2>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo libero, malesuada nec imperdiet in, pharetra quis odio. Nullam aliquet orci ut lobortis commodo. Pellentesque et ligula ut nisi ultrices pellentesque.</p>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Ensure simplicity in your code. For example, instead of using complex classes like "col-12 col-lg-8", opt for a more streamlined approach that works effectively on both mobile and desktop devices. Also, avoid utilizing IDs for styling purposes as they tend to be too specific and are better suited for JavaScript functionality.

Consider implementing the following approach UPDATED answer

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        @media (max-width: 600px) {
          .image-container {
            display: flex;
            justify-content: center;
          }
      }
      </style>
    </head>
    <body>
        <div class="container-fluid">
          <div class="landing-page">
            <div class="col-12 col-lg-8">
              <div class="row">
                <div class="col-12 col-lg-6 image-container">
                  <img class="profile-pic" src="https://picsum.photos/300" alt="Card image cap" style="width: 300px; height: 300px;">
                </div>
                <div class="col-12 col-lg-6 intro-text">
                  <h2> Hi, Pleasure to meet you!</h2>
                  <br>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo libero, malesuada nec imperdiet in, pharetra quis odio. Nullam aliquet orci ut lobortis commodo. Pellentesque et ligula ut nisi ultrices pellentesque.
                  </p>
          
                </div>
              </div>
            </div>
        </div>
    
    
    </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

Retrieving data from the database without the need to reload the page

Hi there! I have a PHP script that fetches data from a database and I want to display this data within a div element with a "link" class without having to reload the page. Check out the code snippet below: <? include('config.php'); $rs = m ...

javascriptphpjqueryhtmlcss

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The erro ...

javascripthtmlcssejs

Data modifications in polymer are not being accurately displayed

I need help with hiding/unhiding a UI element using a button in Polymer. Despite having the necessary elements and code set up, it is not working as expected: <button id="runPredictionButton"> <i>Button text</i> </button> <p ...

htmlnode.jspolymerpolymer-1.0

Having difficulty selecting an element using XPath based on its title

https://i.stack.imgur.com/Of29v.png My XPath: ((//span[text()='Number of Allowances'])/../../../following::div//table[@class='mainTable']//tr[1]//input[@data-automation-id="numericInput"]) The XPath above clearly specifies that the ai ...

javahtmlxpathselenium-webdriver

Adjust the height of the container to accommodate responsive images automatically

Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of ...

javascripthtmlcss

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

htmlwebgoogle-font-api

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the ...

javascriptjqueryhtmlcss

When a link is entered into a textbox, the desired outcome is for it to display as a clickable link when viewed on a web page

I am looking to create a text box where I can input a link, store it in a MySQL database using PHP, and then display the link on a PHP page so that it behaves like the original link. For example: <form> <input type="" name="text" /> <input ...

phphtml

Bootstrap - encompassing or layering columns

I am trying to create a layout where two columns overlap or cover each other. The layout should consist of one column on the left side (6 columns) and one on the right side (6 columns). The desired result is to have: left side (8 columns) and right side ...

csstwitter-bootstrap-3overlap

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

Unpredictable characters within CSS class titles

I've observed an interesting pattern on certain websites like tray.io, asana, and Facebook. When you inspect their CSS class names, you may come across random combinations of characters, such as: <header class="Header_XSDsdksdXKkSDD">..</Hea ...

htmlcssdomsass

Utilizing the power of JSF ajax with Bootstrap's data-toggle feature for radio buttons

Despite my efforts, I have not been able to find a definitive answer on SO. If this question has already been addressed, please point me in the right direction. This is what I currently have: (HTML) <span class="btn-group" data-toggle="buttons-radio" ...

htmlajaxjsftwitter-bootstrapradio-button

Menu with full-width navigation and dropdown options

I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes ...

htmlcssnavigation

What is the best way to display the counter result on the cards at the top of an html webpage?

My latest project involves a comparison script using Groovyscript to analyze two distinct files. Embedded within the Groovyscript is HTML code that utilizes CSS and potentially Bootstrap of any version. I have successfully implemented counters with a titl ...

htmlcssbootstrap-4

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Extracting data from a table on the designated URL using Apify and Puppeteer is my current goal: https://en.wikipedia.org/wiki/List_of_hedge_funds The desired outcome should be an array of objects. Each element in the array must represent a <tr> ro ...

javascripthtmlweb-scrapingpuppeteerapify

Microsoft Edge browser incorrectly calculates range.endOffset value

This particular problem is specific to the Microsoft Edge browser. I am attempting to apply a CSS style to a selected word using Range API's, but I am encountering an issue with the range.endOffset functionality in Edge. Below is the code snippet I am ...

javascripthtmlrangemicrosoft-edge

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

javascripthtmlthree.js

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

javascriptjqueryhtmlcssgoogle-chrome

Positioning icon/image beside the input box

Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...

htmlformscssiconsalignment