The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another method.

(https://i.sstatic.net/RZkAK.jpg)

Below is the code snippet:


<!-- entry point -->
<div class="container mt-5">
    <h1 class="display-3">Lorem ipsum dolor </h1>
    <div class="row">
        <div class="col-lg-8">
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisici</p>
            <p><span class="badge text-bg-dark active">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus et veritatis, dolores ipsum reprehender</p>
          </div>
        <div class="col-lg-4"></div>
    </div>
</div>;

<!-- portfolio display -->
<div class="container mt-5">
  <div class="row">
    <div class="col-lg d-flex flex-wrap">

      <div class="col-xxl-4">
        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/300">
        </div>

        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/600">
        </div>

      </div>


      <div class="col-xxl-4">
        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/500">
        </div>

        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/610">
        </div>

      </div>

      <div class="col-xxl-4">
        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/310">
        </div>

        <div class="portfolio-item">
          <img class="rounded img-fluid" src="https://picsum.photos/410/615">
        </div>

      </div>
     
    </div>
  </div>
</div>
<style>
  .portfolio-item {
    flex-basis: calc(20% - 20px); /* Setting item width */
    padding: 20px; /* Adjusts spacing between items */
  }
</style>
<!-- end of portfolio section -->

<br><br>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
htmlcssbootstrap-5

Answer №1

After reading through the comments for more context, here is my response:

Unfortunately, achieving dynamic layout changes like what you described is not possible using just HTML and CSS. This is because the third column on desktop is its own container, causing it to begin after the largest column on tablet devices, creating a gap.

If the images were static and remained the same all the time, one workaround could involve measuring the gap and applying a negative margin to the third container to adjust its positioning accordingly.

However, in cases where the images are dynamic and constantly changing, a solution would require utilizing JavaScript to calculate the heights of columns 1 and 2, determining the difference between their heights, and then setting that value as a negative margin for the third column.

Alternatively, a different approach would be to consider rewriting the code using something like masonry. With masonry, image positioning is handled entirely by JavaScript without relying on traditional column layouts.

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

The mobile navigation panel fails to open

I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...

jqueryhtmlcss

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

javascriptjquerycsswordpressanimation

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

jqueryhtmlajaxtwitterhtml-table

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Invoke a method in a separate class

I am facing issues with passing variables to another file. I have checked my code multiple times but cannot find a solution. It keeps giving me an error in the function. onclick="limit();javascript:AyudaTipos(2)"/> The function is: function limit ( ...

javascriptphphtmlmysqlajax

Attempting to display images in various formats using the Picture HTML element

Vue is being used to create a dynamic picture component, resulting in the following code: <picture style="display: contents;"> <source type="image/avif" sizes="700px" src ...

htmlimagevue.jssrcsrcset

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling ...

javascriptcssreactjsflexboxmaterial-ui

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

Enhancing code with new Javascript functionality

Currently utilizing the WordPress Contact Form 7 plugin and in need of updating my existing JavaScript code to include an onclick function and data-img attribute for checkboxes. Due to the limitations of Contact Form 7 shortcode, adding attributes beyond i ...

javascripthtmlcss

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

javascripthtmlarraysdomscope

Tips for preserving checkbox state?

I am currently working on a web application project for a clinic and laboratory, specifically focusing on sending tests. I have implemented the code below to select the test category first, followed by the test name related to that category. However, when ...

javascriptphphtmlajaxazure-web-app-service

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...

phpjavascriptmysqlhtmlcss

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

javascripthtmlcssnode.jspdf

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

htmlcsstwitter-bootstrap

Retrieve the id of the clicked hyperlink and then send it to JQuery

<a class = "link" href="#" id = "one"> <div class="hidden_content" id = "secret_one" style = "display: none;"> <p>This information is confidential</p> </div> <a class = "link" href="#" id = "two" style = "display: non ...

javascriptjqueryhtml

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

Learn how to showcase a text file uploaded to a webpage with NODE js and HTML

<!DOCTYPE html> <html> <body> <form action = "/submit" method = "post"> Select a file: <input type="file" name="file"> <input type="submit"> </form> </bod ...

javascripthtmlnode.jscsvupload

What causes the sub-menus to move even when they are set to position: absolute?

The sub-menu items under the about link appear to be slightly shifted from the left, despite setting it with position: absolute; left: 0px. I aim to have all menu items (including sub-menus) perfectly overlapped. Below is the code snippet: <html> & ...

htmlcssdrop-down-menumenusubmenu