Fix the grid display on the project page (gallery)
Prehistory: we are currently rebuilding the old website https://tero.design - essentially creating a copy of the site with some improvements. The developer has completed most of the work but got stuck on one point and needs assistance to finish. I asked to describe the core issue and task, and below you can review this.
The interim version of the site is on the subdomain - https://app.tero.design
🧩 Task essence:
It is necessary to completely rebuild the logic for displaying content on a single project page — so that the gallery (grid) with images and videos displays correctly in a responsive masonry layout. Currently, the grid breaks, widths and heights are calculated incorrectly, there are cut-offs, overlaps, and visual bugs.
Examples of how it should look: https://tero.design/project/80 and https://tero.design/project/61
Current version: https://app.tero.design/project/80 and https://app.tero.design/project/61
📌 What is currently implemented:
Laravel 11 (PHP 8.2) + Blade template.
Content (videos, images, 3D tour, curtains) is passed to multimedia_grid (rows and cells).
In each row: calculation of total height based on content proportions (ratio), then distribution according to flex percentages.
There is custom JS for animation, curtain appearance, and handling.
The grid is rendered using HTML + CSS + JS, without third-party libraries (Masonry, Packery, etc. are not used).
❌ Problem:
Incorrect calculation of flex percentages. Some images/videos are cut off or stretched out of proportion.
Inconsistent row height. Sometimes content in a row is cut, sometimes it doesn’t fill the entire width.
Videos are narrow and tall — taking up too much width, breaking the grid.
Mobile version bugs with 100% width and auto height.
JS conflicts with lazyload and canvas curtain. Initialization is not always correct.
The cause is unknown: style conflicts, logic errors, or calculation mistakes in PHP/JS.
Element behavior is inconsistent: some rows are normal, others are completely broken.
There is custom frame-by-frame element appearance logic (showItemsSequentially), which may affect positioning.
✅ What needs to be done:
Rewrite the project grid to a true responsive masonry layout, considering all content types:
img — regular images.
video — video files (with loop, autoplay, muted).
vr — iframe 3D tour.
curtain — curtains (two images with canvas separator).
Fix width/height calculations on the PHP side (or abandon them in favor of JS if necessary).
Ensure correct responsive behavior on all devices (desktop, tablet, smartphone).
Provide stable appearance of all blocks, without jerks, lag, or lazyload bugs.
Optionally — you can use a masonry library: for example, Masonry.js, Packery, or CSS Grid/Flex with JavaScript calculations.
Move JS to a separate file, not inline.
💡 What might help:
Projects are loaded from the database via Laravel.
The project already uses Vue + ElementPlus (in admin panel), but on the front end, Blade.
All multimedia is in /public/multimedia/....
Proportions of content can be saved using getimagesize(), but if that doesn’t help — JS onload can be used for calculations.
🔐 Important:
It must be cross-browser compatible.
Mobile device support is mandatory.
Responsiveness (row height, column width) should be flexible but visually balanced.
Code must be clean, with comments.
🧾 What to provide:
Refactored Blade template for the project page.
Extracted styles and scripts (preferably — app.css, project.js).
Working masonry grid where:
no cut-off elements;
no overlaps;
curtains and videos work correctly;
mobile looks adequate.
🔧 Project technologies:
Laravel 11 (PHP 8.2)
Vue 3 (for admin panel)
Element Plus (UI)
Flysystem, VueFinder
Thank you for your attention. I look forward to your proposals regarding cost and implementation timeline for this task. If you have questions — feel free to contact me, I will try to respond quickly.
-
13 days793 USD
223 13 days793 USDHello!
I am a front-end developer with 2 years of experience. I saw your project — familiar issues with masonry, lazy load, and jumping proportions. I want to help.
What I will do:
I will figure out why the height calculations are breaking.
I will rewrite the grid using CSS Grid + JS for complex cases (videos, curtains).
I will eliminate the jerks during loading.
… I will test on real devices.
Deadline: 3-5 days.
Why me:
I have created responsive masonry galleries without jQuery.
I know how to make iframes and videos behave in the grid.
Mobile-first approach.
-
15 days1057 USD
12912 67 0 15 days1057 USDHello! I will complete your task quickly and efficiently.
My portfolio: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Write to me, I will start working today. I will be glad to cooperate with you!
-
1 day79 USD
717 21 2 1 1 day79 USDHello. I see an error in the incorrect specification of height and width in the html code for video blocks and for the panorama block - in the videos they are simply swapped, it seems they are set manually through the admin panel and just entered incorrect data, hence the problem. Basically, the same script calculates the sizes as in the original version, so there is no need to also calculate flex percentages on PHP. But otherwise, I am ready to help fix bugs, although I didn't see any problems except for elements with incorrect initial size values.
-
10 days793 USD
134 10 days793 USDHey Dmitry 🧱
I have implemented responsive masonry grids in Laravel/Blade templates, including dynamic multimedia content (videos, curtains, 3D tours, images) — and encountered the same issues as you: incorrect size calculations, bugs in the mobile version, JS conflicts with lazyload and animations.
📌 Example of a similar project — https://octus.com/: custom front-end with animations, dynamic block loading, and video/image optimization.
What I offer:
🔹 Rewrite the masonry grid with full responsiveness (CSS Grid or using Masonry.js if desired)
🔹 Correct size calculations: either on the JS side (onload + naturalHeight/Width), or PHP with fallback
… 🔹 Fix bugs with overlapping, cropping, unstable proportions
🔹 Ensure support for all content types: images, videos, iframes, curtains with canvas
🔹 Move JS to a separate module project.js, without inline code, with comments and neat initialization
🔹 Focus on clean code, cross-browser compatibility, and responsiveness
🔧 Laravel 11, PHP 8.2, Blade, JS – over 10 years of experience
🔧 Ready to work directly with the current developer to avoid breaking logic and to refine it carefully
GitHub – https://github.com/berestovskiy
Clutch – https://clutch.co/profile/sbase#highlights
Website – https://sbase.team/
I can start today.
Willing to complete part of the grid as a demonstration of the approach — then we will discuss the final price and deadlines.
Cheers, Anton ✌️
-
7 days1190 USD
421 7 days1190 USDHello Dmitry,
I've analyzed the grid issues on your interim site and can implement a robust solution within 5-7 days.
-
У вас для каждого элемента width и height в админке зпдпются? На app.tero.design/project/80 для видео они в коде страницы перепутаны местами.
Похоже, на другой странице та же фигня, поскольку там неправильные пропорции только в строке с 3D панорамой.
-
Current freelance projects in the category HTML & CSS
Create a small website
334 USD
Main screen After logging in, the user enters their personal account. The design is made in the style of a modern cryptocurrency exchange (Binance, Bybit, OKX). The main page displays: Total balance. Income for today. Income for the week. Income for the month. Total profit. In… HTML & CSS, Web Programming ∙ 52 minutes back ∙ 61 proposals |
Web design and developmentHello! For the current project, I am looking for two separate specialists: web designer (Figma) web developer (Frontend / WordPress) The project includes tasks such as: landing pages, online store, admin panels, WordPress site, as well as small tasks on React / Next.js and… HTML & CSS, Web Design ∙ 2 days 20 hours back ∙ 110 proposals |
A Drupal developer is needed for edits on several websites.A Drupal developer is needed for edits on several websites. The site has bloated and filled up all the hosting.. HTML & CSS, Web Programming ∙ 3 days 3 hours back ∙ 38 proposals |
Optimization of WordPress site speed
113 USD
We will send full details in private messages Goal Maximize website loading speed, especially on mobile devices. KPI (mandatory) After the work is completed, the following metrics must be achieved. Mobile Performance 90+ LCP less than 2.2 sec INP less than 200 ms CLS less than… HTML & CSS, Javascript and Typescript ∙ 3 days 18 hours back ∙ 67 proposals |
Create a website and connect it to Shopifyto create a website and connect it to Shopify the main page is in the mockup there will be no product pages, there will be a modal window for selecting the size of the cream jar and its quantity after that, a delivery and payment window the order must be sent to Shopify with… HTML & CSS, Web Programming ∙ 3 days 21 hours back ∙ 78 proposals |
Krakow