While working on my portfolio, I ran into an issue. It is built using the isotope filter to categorize projects.
The problem arises during initial loading, as the portfolio elements overlap instead of being neatly arranged in a 4-column grid.
After selecting a category, everything seems to be fixed. I have checked through the code, but I can't pinpoint where I went wrong. Here's a link to the page in question, currently hosted for free, to allow access to the code.
Thank you in advance,
Julian
If you're not well-versed in Isotope filtering, perhaps someone else can offer insight on that matter.
The reason your boxes are overlapping is due to the use of absolute positioning. When elements are positioned absolutely, they are removed from the normal document flow, causing them to not affect adjacent elements.
In the first row of boxes, the top position is set at 0; 18 on the second row, and 36 on the third row.
You may want to explore alternatives such as floats, static/relative positioning, or delve into learning about Flexbox if you haven't already (it's gaining widespread browser support). Additionally, CSS Grids could potentially be utilized for this purpose in the future. However, it's still not a fully effective option at present.
Flexbox is the way to go for your layout needs. Check out this resource to dive deeper into flexbox:
Can someone guide me on how to reference the Bootstrap link (https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css) in a .css file within an Angular project? ...
I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...
Although it may appear simplistic, as a beginner coder I am struggling to get my code to display properly (I am using bootstrap). The desired result I want to achieve is FLAG languagename FLAG languagename Here is the HTML: <div class=""> <ul ...
Is it possible to create a Bootstrap class that applies specifically to certain breakpoints? I am aware of classes like col-sm-2 col-md-4, but I am looking for something that allows me to set the width of an element. Currently, to set the width to 100%, ...
My website includes hidden textarea fields to store javascript information that is sent to the server for processing. Unfortunately, the page displays a small form at the top and has a scroll bar due to the hidden textareas. Is there a way to eliminate th ...
I recently created a website that looks perfect on desktop but appears cropped on mobile devices. The site in question is doc.awsri.com Here are the images causing the issue: https://i.stack.imgur.com/eRJXU.png The problem arises when viewing it on a ph ...
I am working on a layout that features 7 icons with short links and descriptions underneath each. My goal is to have 4 icons displayed horizontally in one row, followed by 3 icons in the second row. While I have managed to set up the text and links as desi ...
Is there a method to organize a css file in the following structure?: a:link { color: red; font-weight: bold; a:hover { text-decoration: none; font-weight: normal } } I would like a regular link to appear underlined and bold, but when hov ...
Currently, I am developing a simple functionality for radio buttons that activates an input text box when clicked. If any other radio button is selected, the input field should go back to its disabled state. Initially, everything was working smoothly unti ...
Could someone kindly take a look at the code snippet below and help me troubleshoot why the animation for the image and info divs is not functioning properly? This block of code is from the HTML file for the about page. (I enclosed the content within a div ...
I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...
My CSS is set up to float my divs next to each other, creating 3 rows and 3 columns as needed. However, I'm facing an issue where the first div in the second row is being pushed under the second column instead of the first one. It's quite puzzlin ...
I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...
I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below: https://i.sst ...
Below is the code snippet I am working with: $( document ).ready(function() { $( '.prevent-default' ).click(function( event ) { event.preventDefault(); }); }); To prevent the window from jumping when a hashed anchor ...
I was able to resolve the issue by adjusting my search filter algorithm. Now, I can search regardless of word order, but the results are not as specific as I need them to be. When I type "Correy" in the search bar, it shows all results containing that wo ...
One of the dynamic elements on my page is a span that I want to trigger an action when clicked. Here is the HTML snippet: <span class="assistly-widget" id="assistly-widget-1"> <span style="width:65px;display:inline-block;min-hei ...
I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...
Is there a way to create a scrollbar within a bootstrap 4 dropdown selection? I am facing an issue where the dropdown does not fully load when there are too many files. My solution is to display only 5 files when the dropdown is clicked and include a scrol ...
Is col-sm the default class applied for large screens if col-lg and col-md are not specified? ...