Create a responsive layout of inline-block elements that adjusts to resizing

I am currently focusing on developing the website found at:

The progress so far includes successfully creating a list of div.project-item elements that adjust the number of columns based on window resizing due to the use of inline-blocks. My next goal is to implement a scaling feature when resizing the window within a specific range (between min-width and max-width) before adjusting the column count to ensure optimal display. However, I am encountering an issue where there is a large empty space after removing a column. It would be more efficient to maintain the display of three smaller columns rather than two larger ones in such situations.

Previous attempts include utilizing flexbox and changing block elements instead of inline-block while floating them left. Although this achieved resizing functionality, aligning the content centrally remained unresolved with floated elements.

Find relevant code snippets below:

HTML:

<div class="content-wrapper">
            <div class="project-list">
                <div class="project-item">
                    <a href="#">
                        <img class="project-image" src="res/img/Placeholder.jpg">
                        <div class="project-overlay">
                            <div class="project-desc">
                                <span class="project-title"></span>
                                <span class="project-text"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="project-item"...

CSS:

/* Wrapper */
div.nav-wrapper, div.content-wrapper {
    max-width: 1280px;
    padding: 0 25px;
    position: relative;
    margin: 0 auto;
    height: 100%;
}

/* Portfolio Project List */
div.project-list {
    padding-top: 150px;
    max-width: 1300px;
    margin: 0 10px;
    text-align: center;
    font-size: 0;
}

/* Project Item */
div.project-item {
    display: inline-block;
    position: relative;

    width: 400px;
    height: auto;
    margin: 10px;
    overflow: hidden;
}

div.project-item:after {
    padding-top: 56.25%;
    /* 16:9 ratio */
    display: block;
    content: '';
}

img.project-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    max-width: 100%;
}

div.project-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: black;
    opacity: 0;
}

Answer №1

To make div.project-item's width flexible, you can use a percentage instead of a fixed pixel width.

For example:

div.project-item{
    width: 30%;
}

This way, the width will adjust when you resize the window.

If at some point you only want to show two items, you can achieve this using media queries.

For instance:

@media (max-width: 920px){
    div.project-item{
        width: 45%;
    }
}

Answer №2

I concur with Yandy's perspective.

Consider adjusting the width of your div.project-item to 40% (specifically for displaying two divs). Here is an example:

div.project-item {
display: inline-block;
position: relative;

width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}

Additionally, incorporate the following code:

@media only screen and (min-width: 1347px) {
div.project-item {
    width:31%
}
}

@media only screen and (max-width: 926px) {
div.project-item {
    width:75%
}
}

You have the flexibility to choose the width percentages that best suit your project needs. The setting for 926px applies to a single div, while the 1347px setting is intended for three divs being displayed at once.

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

Tips for stopping automatic scrolling (universal solution)

Issue or Inquiry I am seeking a way to disable actual scrolling on an element while still utilizing a scrollbar for convenience (avoiding the need for manual JavaScript implementations instead of relying on browser functions). If anyone has an improved s ...

Anomaly with Responsive Images in Internet Explorer 7

Something unusual has come up. In the process of developing a WordPress theme, I needed it to be completely responsive. I decided to create a "gallery" consisting of rows with 3 thumbnails each, which would open in a lightbox when clicked. To achieve this ...

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

Positioning Anchors in HTML Tables within the Viewport: A Comprehensive Guide

I am utilizing anchor elements within an HTML table and aiming to incorporate some spacing at the top of the viewport. I have discovered that by placing the anchor inside a dummy DIV element within the TD, I can achieve this. However, my goal is also to hi ...

Eliminating the admin-bar.php styling in a WordPress theme

Currently, I am working on developing my very first WordPress template. I have encountered an issue with the top navigation being pushed down by a specific style rule: html { margin-top: 32px !important; } After investigating further, I discovered that t ...

Rotate the image using the handler, not by directly manipulating the image itself

I need help rotating the image using a handler instead of directly on the image itself. I do not want to rotate the image when clicking and rotating it directly. Please do not suggest using Jquery UI rotatable because resizing the image with Jquery UI resi ...

Struggling to synchronize animation timing between elements using jquery

When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

I am unable to modify the suffix located beneath the price of the product

Although I am not well-versed in PHP, I managed to create a code to display parcel descriptions below the price of products. The issue I am facing is that my code is calculating too many decimal places and not displaying the default currency, which should ...

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

When the height of a sibling element restricts the inner content and scroll bar due to the parent element's height being defined in vh

I'm currently working on creating a sidebar that occupies a fixed percentage of the viewport. Inside this sidebar, I want to have an element that remains fixed at the top while allowing the rest of the content to scroll if it exceeds the height of the ...

Encoding data using Angular

I have encountered a situation where my code needs to retrieve table numbers using Javascript and PHP as the database connector. However, when the code works successfully, it displays both the parameter name and value, but I only need the value. How can I ...

Implementing CSS to Style Images in JavaFX FXML

After creating the FXML structure below, I attempted to define a border in CSS for the Image by using code in the customerform.css file: <VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.exampl ...

Fluidity of Containers on Mobile Devices

I currently have a list structured like this: https://i.sstatic.net/ei4Xt.png In order to display more details about each list item, I've added a hidden div that can be toggled open like so: https://i.sstatic.net/61k5Z.png While this works fine on ...

Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x. While I have experience changing CSS with JavaScript, this particular challenge has me stumped. Code: var x = Math.floor((Math.random() * 1080) + 1); ...

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...