Tips on fixing image movement when scrolling and switching resolutions

I am currently working on developing my HTML/CSS portfolio. However, I am facing an issue where the images on the site move around whenever the scroll level or resolution size is changed. I want the images to remain in their respective blocks, displayed at 100% zoom on a 1920x1080 monitor.

I attempted changing the position to absolute in the CSS, but this resulted in some images being removed and completely altering the remaining image placements.

Below is the code snippet:

.row {
  text-align: center;
}

.containerPortfolio {
  position: relative;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
} 

.containerPortfolio .content {
  position: absolute;
  width: 400px;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 400px;
  padding: 15px;
}
<div class="row">
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  (repeat for more containerPortfolio entries)
</div>

htmlcssimageresponsive-design

Answer №1

After some careful consideration, I managed to find a solution to my issue.

To resolve the problem of my images moving out of place within their group, I created a new <div> with the class name "inblock." Additionally, I added a few lines of CSS code:

.inblock {
  max-width: 1920px;
  min-width: 1080px;
  margin: auto;
  justify-content: center;
}

By implementing these adjustments, the display problem was successfully rectified. The updated HTML now appears as follows:

<div class="inblock">
    <div class="row">
        <div class="containerPortfolio">
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
            <div class="content">
            <p>Lorem ipsum..</p>
            </div>
        </div>
        (additional containerPortfolio elements...)
    </div>
</div>

I later added the ondragstart attribute to prevent users from dragging the images around with their mouse.

I hope this explanation is clear and helpful for others facing similar issues :)

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

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

htmlcssvue.jsbootstrap-4bootstrap-vue

JSON data for DataTables

I encountered a task that requires me to populate data in datatables from a JSON object. To achieve this, I implemented the following code: $('#example').dataTable( { "data": dataSet, "columns": [ { "title": "Engine" , "data" : "fieldName1"}, ...

htmljsondatatables

Hacking through external script injections into the browser

Curious about how certain software or programs are able to inject html,css,js into a web browser without the need for installing any extensions. Every time I open Chrome or Firefox, I'm bombarded with ads on popular sites like Google homepage, Faceboo ...

javascripthtmlcsscode-injection

What is the best way to use a handlebar ternary operation to dynamically add an HTML element in AngularJS?

Please Note: When I refer to "handlebars," I am not talking about Handlebars.js, but rather the double curly braces. I have a table where I need to display data in one of the columns along with an additional HTML element based on the result of a ternary o ...

javascriptjqueryhtmlangularjs

The issue of the background image not expanding to cover the entire page when resized is problematic

Hello there, I'm currently working on making my website responsive and I've run into a problem with GIF images. No matter what I do, they just won't fill the entire page. When I try to make them smaller, it leaves white spaces at the top and ...

css

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

htmlcss

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

javascripthtmlreactjsnpm

Updating the background of the <html> tag using jQuery

Is there a way to modify this CSS using jQuery? html { background: yellow; } Attempting the following code does not yield the desired results: $('html').css('background','red'); ...

jquerycss

Switch the CSS class when clicking on a responsive table within a table

I am looking to update the background color of a row within a table when a tr is clicked. Below is the code for the table: <div class="table-responsive"> <table class="table table-hover"> <thead> ...

cssvue.jsbootstrap-vue

What is the best way to have text fit perfectly into a table cell?

In my asp.net table, the first column contains captions for each row of data. The length of these captions varies, with different amounts of words in each one. I am looking to align the first letters of each caption at the beginning edge of the cells (left ...

htmlcssasp.net

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascriptcssminifygoogle-closure-compileryui-compressor

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

htmlcss

What is the best way to remove an active class by clicking in my specific situation?

I was working on creating a gallery of Unsplash images that would display a full-screen image when the user clicked on a small image. I implemented a modal window that should appear when the user clicks on the small image, and I wanted it to close when the ...

javascriptcssreactjsonclickmodal-dialog

Navigate within a single component on the Stack by scrolling

I'm a huge fan of CSS! Although it may seem like a simple task, I am completely stumped on how to tackle it. Mission: My goal is to enable scrolling only within the List section without affecting the entire page. Here's the structure of my ...

cssreactjsmaterial-ui

Display dynamic HTML content within an iframe using jQuery Fancybox

Looking to incorporate dynamic content from the server using ajax into a fancybox (iframe)? Check out this method that allows you to display the entire html page: index.html <html> <head> <link href="css/fancybox/jquery.fancybo ...

jqueryhtmlajaxfancybox

Tips for locating a specific div based on its background color

Take a look at this code featuring a grid - can you figure out how many cells are colored yellow and more? Check it out here ...

html

Browsing using the "touchmove" feature feels extremely laggy

I implemented a workaround to achieve "position:fixed" on mobile devices, specifically my Android device. This involved creating two divs with heights that combined to match the screen height through JavaScript, and adding touch listeners to the bottom div ...

javascriptcssmobile-website

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

Adapting the Homepage Based on User Authentication

Currently, I am working on a website where I am implementing a login feature. Once the user logs in successfully, they should be redirected to the index page and see something other than the login button. I have been using the following code for my implem ...

phphtmlsessionbuttonauthentication