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;
}