What is the best way to ensure my image and text are centered and responsive?

After resizing the window, here's the desired outcome I am aiming for: https://i.sstatic.net/FdQKg.jpg

The issue with this result is the lack of centering. When I attempt to center them, it leads to a problematic layout as shown here: the problem. I must be making a mistake while trying to center them. The code below is what causes the problem when attempting to center.

Check out my current code:

section {
    margin-top: 25px;
    padding: 24px;
    box-sizing: border-box;
}

h2 {
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

.flex-container {
    display: flex;
    flex-direction: column;  
    align-content: flex-start;
    height: 100%;
    padding: 15x;

  }

  .flex-container > div{
    position: relative;
    left: 21%;
    border-radius: 5px;
    padding: 8px;
  }

.articleactu img {
    float: left;
  border-radius: 15px;
  max-width: 210px;
}

p {
   word-wrap: break-word;
   max-width: 900px;
   padding-left: 200px;
}

#titre {
    line-height: px;
    font-weight: bold;
}

#date {
    font-size: 14px;
    font-weight: bold;
    color: #662189;
}

hr.solid {
  position: relative;
  left: 21%;
  width: 50%;
  opacity: 12%;
} 

div p ,#titre ,#date {
    margin-left: 35px;
}
<!-- ACTUALITÉ - ARTICLES -->

  <section>
      <h2> L'ACTUALITÉ </h2>
    <article class="articleactu">
  <div class="flex-container">
    <div>
      <img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
        <p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
        <p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
        <p id="date"> Publié le 27 novembre 2021 </p>
    </div>

<hr class="solid">

    <div>
      <img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
        <p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
        <p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
        <p id="date"> Publié le 26 novembre 2021 </p>
    </div>

<hr class="solid">

    </article>
  </section>

I'm looking for some assistance in resolving this issue. Any help would be greatly appreciated. Thank you!

htmlcss

Answer №1

The primary explanation is

.flex-container > div{
    left: 21%;
}

Therefore, the specified div element spans the full width of its container (100%), but it is positioned with a left value of 21%. Consequently, the content will appear aligned to the left side of the container.

Consider the following code snippet:

section {
    margin-top: 25px;
    padding: 24px;
    box-sizing: border-box;
}

h2 {
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

.flex-container {
    display: flex;
    flex-direction: column;  
    align-content: flex-start;
    height: 100%;
    padding: 10%;

  }
.flex-container > div {
  display: flex;
}
.flex-container > div > div {
  float: left;
}

.description {
  margin-left: 20px;
}

.articleactu img {
    border-radius: 15px;
    max-width: 210px;
}

p {
   word-wrap: break-word;
}

#titre {
    line-height: px;
    font-weight: bold;
}

#date {
    font-size: 14px;
    font-weight: bold;
    color: #662189;
}

hr.solid {
  position: relative;
  width: 50%;
  opacity: 12%;
}

Insert this into your HTML structure:

<section>
    <h2> L'ACTUALITÉ </h2>
    <article class="articleactu">
      <div class="flex-container">
        <div style="display: flex">
          <div>
            <img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
          </div>
          <div class="description">
            <p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
            <p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
            <p id="date"> Publié le 27 novembre 2021 </p>
          </div>
        </div>

        <hr class="solid">

        <div>
          <div>
            <img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
          </div>
          <div  class="description">
            <p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
            <p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
            <p id="date"> Publié le 26 novembre 2021 </p>
          </div>
        </div>

        <hr class="solid">
      </div>
    </article>
  </section>

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

Retrieve the value from another select element

Is there a way to create a function in pure JavaScript that changes the selected options in two select tags based on each other? For example, if I choose a French word in one select tag, the English equivalent automatically changes in the other select tag ...

javascripthtmlselect

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

htmlangularbuttonaudio

How to Toggle Visibility of TH and TD Elements using Bootstrap 5

In my current setup, I have the following table: <table class="table table-sm table-borderless w-auto"> <thead> <tr> <th> <input type="checkbox" value="false" class="form ...

htmlcsstwitter-bootstrapbootstrap-5

"Embed a div element over a full-screen iframe or image

Is it possible to create a div within a fullscreen iframe without using JavaScript? I want to achieve a similar layout to the Netflix player, with static buttons and functions in PHP. The div should have a cut background positioned on top of the iframe. ...

phphtml

Replacing strings with file_get_contents in PHP is a common practice for retrieving

Currently, I am working on replacing a specific string within a file and so far everything seems to be going well. The file in question is an htm file formatted in html, but that shouldn't pose any issues. This is what my script looks like: $file = & ...

phphtml

Utilizing Bootstrap to set an image as a full-width background within a

I need a header for my webpage that includes a greeting and uses an image as the background. How can I set it up so that the image serves as the background for the container-fluid, but adjusts with the text to ensure full responsiveness? This is the heade ...

csshtmlbootstrap-4

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

javascriptcssreactjsmaterial-ui

I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

When adjusting the browser size, the images are resized which is great because it's exactly what I intended. However, the lower part of the black area does not resize accordingly. This results in a black area appearing under the images when viewed on ...

jqueryhtmlcsstwitter-bootstrapbxslider

Utilize drag and drop functionality to interact with an HTML object element

I am struggling with a div that contains a PDF object and draggable text: <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { alert("DROP"); } </script> </head> <body> <di ...

javascripthtmlcss

Is there a way to manipulate row colors in jQuery based on specific conditions?

<tr class="acti">//class <script type="text/javascript"> var status = $(this).parent().parent().children(".activity-status").attr("data-value");//Modifying colour of the upper class based on jQuery value retrieved I am implementing a for e ...

jqueryhtmlcssasp.net-mvc

Issues with aligning text in a flexbox using Bootstrap 4's text-center property

I am currently working on a project to create a webpage with two vertical columns that are clickable and lead to different pages. Here is what I have so far. HTML <!-- Choices --> <div class="container-fluid"> <div class="row"> ...

csshtmltwitter-bootstrapbootstrap-4

Switching the order of elements in a column using Flexbox

Here is the grid layout on PC: https://i.sstatic.net/4HRvd.png And here is the grid layout on mobile devices: https://i.sstatic.net/URBjb.png I am looking to rearrange the order and layout of the grid. I have tried using flexbox, but I need to group B an ...

htmlcssflexbox

Warning: HTML input values are being cleared when added

I've been working on some code that adds an input field when a button is clicked. When the limit reaches 5 (counter), it displays a bootstrap warning. The issue I'm facing is that after hitting "add field" more than 5 times, the values in the fie ...

javascriptjqueryhtmltwitter-bootstrap

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Every time I attempt to run node commands or create a new Angular project, I encounter the following error. Node version 20.11.0 NPM version 10.2.4 https://i.sstatic.net/Dg6BU.png https://i.sstatic.net/ZwN1Q.png ...

javascripthtmlnode.jsangularnode-modules

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

I'm curious if there is anyone who can guide me on creating a fascinating horizontal reel scroll slideshow using asp.net, similar to the one showcased in this mesmerizing link! Check out this Live Demo for a captivating horizontal slide show designed ...

javascriptjqueryasp.netcss

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

I'm a beginner with node.js and I've encountered an issue while trying to run my node app.js file after incorporating a new file named projects.js which contains the following JS code: exports.viewProject = function(req, res){ res.render(" ...

javascripthtmlnode.jsexpressterminal

Obtain CONTENT from a separate CONTENT using JSExecutor

Having trouble selecting and clicking an element on a page due to the #document tag. Here is my latest attempt: var doc = (OpenQA.Selenium.Remote.RemoteWebElement)_driver.ExecuteQuery("return window.document"); doc.FindElementByXPath("//span ...

javascriptc#htmlseleniumxpath

Video from Brightcove continues to play even after closing the modal dialog

My concept for opening a Brightcove video in a modal dialog when a button is clicked has been successfully implemented. Below is the code snippet I used for this implementation: Html code: <a class="videoTutorialB" href="#">Watc ...

javascripthtmljquerybrightcove