I am struggling with creating a responsive webpage using HTML and CSS

click here for image description

Is there a correct way to resolve this issue? When I view it responsively in Chrome at 1000 pixels, the photo overlaps the text.

This is my HTML code: ` 

        <div class="fans-inner">

            <div class="account acc-left">
                <img class="account-logo" src="./img/man.png&qout; alt="">
            </div>

            <div class="block-coments">
                <p class="coments">
                    Consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore 
                    et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut 
                    aliquip ex ea commodo core dot occaecat cupidatat 
                    non proident, sunt in culpa qui officia borum.
                </p>
            </div>
    
        </div>

        <div class="fans-inner">

            <div class="block-coments">
                <p class="coments">
                    Consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore 
                    et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut 
                    aliquip ex ea commodo core dot occaecat cupidatat 
                    non proident, sunt in culpa qui officia borum.
                </p>
            </div>
            <div class="account acc-right">
                <img class="account-logo" src="./img/man.png" alt="">
            </div>

        </div>
        

    </div>

</section>`

CSS : `

       .fans-inner {
         display: flex;
         justify-content: center;
         position: relative;
        }
      .account {
         position: absolute;
      }

       .block-coments {
          max-width: 800px;
       }

       coments {
           margin-left: 40px;
           margin-right: 40px;
           padding: 25px;
           background-color: #f2f2f5;
           margin-bottom: 20px;
       }

       .acc-left {
           left: 10%;
       }
       .acc-right {
           right: 10%;
       }`

Should I move them below the text at 1000px? see image here. If I set Left: 0, Right: 0, the photos are too distant from the text.

htmlcssbootstrap-4

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

Express in Node.js throwing error: 'Cannot GET /'

I recently created a contact us form on my website where users can input their email, name, and gender. The entered data is then stored in an output.txt file. Everything was working fine when I initially developed the website. However, today when I tried t ...

javascripthtmlexpresspug

I'm looking to extract information from a webpage using Python by inputting specific criteria

Looking to gather information from a specific website - Link and save it either in a database or another location. The process involves providing input parameters such as entering the vehicle number, submitting it, then verifying if it matches your car. N ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Tips for disabling the Enter key event specifically (without the combination of Shift+Enter) in a contenteditable field

I'm trying to incorporate the contenteditable attribute in my code, but I've run into an issue. I would like for pressing (shift + enter) to move to the next line (Note: I only want shift + enter to trigger this action), and when I press the ent ...

jqueryhtml

Tips for keeping buttons anchored at the bottom of the page during scrolling

As a newcomer to Ionic, HTML, and CSS, I am currently exploring how to keep a button fixed while scrolling through the page. Despite specifying a fixed position in the CSS, the button does not remain fixed as intended. The button seems to be having troubl ...

htmlcssionic-framework

The JQuery keydown event will only be activated once unless another action occurs

I am attempting to display a font awesome '?' symbol after each element that has the ".info" class when the user presses and holds the "alt" key. It seems to be functioning properly, but when I release the "Alt" key and try to press it again, not ...

javascriptjqueryhtml

"Discovering the best method for identifying elements by their shared ID in JavaScript within a Django environment

My Django table contains all the answers for a test, but when I try to compare them with the user's response, all the answers are the same as the first one. I understand that this issue is related to getElementsById, which only selects the first eleme ...

javascripthtmldjango

The PHP index is not being identified when accessed through the post method

I am delving into the world of PHP as a beginner and still learning the ropes. I tried to replicate a small script exactly from one language to another, but encountered an issue where the index from my HTML file is not being recognized in PHP. The tutorial ...

phphtml

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

javascriptphpjqueryhtml

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

The bottom of the page displays varying outcomes between Code Snippet (CodePen) and Angular

I had the idea of having my footer cover the entire length of the page and stick to the bottom, adjusting itself if more content is added. However, I encountered an issue where on Codepen everything works perfectly, but on Angular (14), the footer does not ...

htmlcssangularflexboxfooter

What is another option for object-fit: cover?

Is there a way to resize an image on my webpage while maintaining its aspect ratio based on the screen size? I want the smaller dimension (width or height) to fit exactly within the element, with the larger dimension overflowing. I came across the objec ...

htmlimagecss

Show a confirmation dialog box using bootbox that includes a link when the user selects OK

I am currently experimenting with integrating bootbox.js into a test page. However, I am facing an issue where the href tag in the hyperlink triggers regardless of whether the user selects the Cancel or OK button on the bootbox. Is there a way to include ...

javascriptjqueryhtmldjangobootbox

Opacity for ghost images in HTML5 drag-and-drop interface

Is there a way to make the ghost image for draggable elements in Chrome render on a transparent background, similar to how Firefox does it? I'm seeing that in Chrome (Chromium 45), the ghost image is displayed on a white background. For Example: http ...

csshtmlgoogle-chromedrag-and-drop

Using a loop to format the <ol> tag

After creating an HTML script using angular, I was able to successfully display the names in an array as shown below. <div ng-repeat="namep in names"> <li>Name : <span ng-bind="namep.name"></span></li> <li>Age : ...

htmlangularjs

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Encountering an error trying to access 'version' in vue-bootstrap due to undefined properties

I recently downloaded npm packages based on the requirements outlined on . Here is how my package.json file looks: "dependencies": { "bootstrap": "^4.0.0", "bootstrap-vue": "^2.23.1", }, My main. ...

vue.jsnpmbootstrap-4vuejs3bootstrap-vue

Setting up ng-show in AngularJS

Looking for a solution to use ng-repeat and ng-show to organize data into two columns effectively <div class="col-md-4"> <div class="row" infinite-scroll="eventSearchService.getMoreEvents()"> <div ng-repeat="event in eventSearchService ...

javascripthtmlangularjsangularjs-ng-repeatangularjs-filter

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

javascriptjqueryhtmlcss

Develop a custom WordPress meta box for managing the color scheme of individual posts and pages

Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...

csswordpressselectmetabox

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss