Консультации по react и next.js
Добрый день, наш фронт создан год назад и доступа к фронтендеру уже нет.
У меня есть вопрос 1:
в проекте есть iframe которы при помощи html code встраивается на сайт (во вложенном файле)
Задача меняя ширину и высоту в html коде добиться пропорционального изменения фрейма
что бы можно было встроить в любое место своего сайта того размера, какого хочешь.
Вопрос 1: посмотреть текущее решение и понять насколько это возможно сейчас.
Вопрос 2: Проверить текущий функционал на адаптивность верстки, особенно мобильной, что бы окно общения помещались в размер экрана моб устройства.
Вопрос 3: после консультации откроем следующий проект на доработку по необходимости.
Приложения 1
-
1 день4884 UAH
54 1 день4884 UAHЗдравствуйте.
Готов взяться за это. Напишите мне, мы можем обсудить это более подробно.
-
2 дня1221 UAH
380 2 дня1221 UAHДоброго времени суток, ссылку можно преобразовать в компонент, для переиспользования в приложении. Также можно собственный чат заюзать с текущим ai assistent. Как у Вас организован внутренний State Managers? Пишите лс.
-
1 день1221 UAH
952 9 1 1 день1221 UAHЗдравствуйте, напишите в лс
-------------------------------------------
-
1 день1221 UAH
55651 1026 1 10 1 день1221 UAHЗдравствуйте.Есть большой опыт с Next.js.Готов к сотрудничеству
-
1 день1221 UAH
853 3 0 1 день1221 UAHЗдравствуйте, Влад! Есть опыт в необходимом Вам стеке. Понимаю, в какую сторону нужно "копать". Готов в личной переписке обсудить более конкретно Ваши требования. Пишите, буду рад сотрудничеству ) Как пример, делали редизайн данного сайта https://mashaonsol.com/ с похожими вещами
-
1 день1221 UAH
427 1 день1221 UAHДобрый день!
Готовы Вам помочь, напишите в личные сообщения, сразу приступим к выполнению!
-
4 дня13 676 UAH
267 4 дня13 676 UAHЗдравствуйте!
Спасибо за подробное описание задачи. Меня зовут Арташес Маргарян, я full-stack разработчик с опытом работы с встраиваемыми решениями (iframe), адаптивной версткой и интеграцией HTML-компонентов в различные проекты.
📌 По вопросам:
1. Готов изучить текущее решение и проверить, насколько возможно сделать iframe с пропорциональным изменением ширины и высоты. Возможно, понадобится обернуть iframe в контейнер с CSS-стилями, поддерживающими масштабирование (например, через aspect-ratio или padding-top трюк).
2. Проведу анализ текущей верстки на адаптивность, особенно на мобильных устройствах, и дам рекомендации по улучшению. Проверю, как iframe ведёт себя на разных разрешениях.
…
3. После консультации с радостью подключусь к следующему этапу доработок — оптимизация, улучшение функционала или интеграция дополнительных возможностей.
🛠️ Работаю быстро, аккуратно и всегда на связи для обсуждений.
Готов приступить к анализу сразу после получения доступа к текущему iframe-коду (вложенный файл).
С уважением,
Арташес Маргарян
-
3 дня2442 UAH
884 15 3 3 дня2442 UAHЗдравствуйте,
Я являюсь опытным Full-Stack разработчиком и занимаюсь разработкой уже более 4-х лет. Имею огромный опыт в работе с адаптивной версткой. Работал с Iframe, когда-то разрабатывал встраиваемые виджеты для сайта. Готов помочь вам в реализации вашей задачи! Напишите мне в ЛС, обсудим всё подробнее.
Буду рад сотрудничеству с Вами.
С уважением,
Maksim Alesiayuk
-
1 день1221 UAH
272 1 день1221 UAHДобрый день, готов помочь с решением вашей проблемы но не совсем понял что именно вам нужно, напишите в лс
-
через aspect-ratio можно добиться этого, если я правильно понял задачу
-
Можно фрейм сделать компонентом и передавать нужные параметры. Пишите, помогу
-
Question 1: Adjusting iframe width & height dynamically
Currently, the iframe has fixed dimensions (
width="315px"
andheight="420px"
). To make it responsive and proportional, you can use CSS styles like this:Solution 1: Using CSS to make it responsive
Modify the HTML as follows:
```
<div style="position: relative; width: 100%; max-width: 400px; aspect-ratio: 3/4;">
<iframe
style="width: 100%; height: 100%; border: none;">
</iframe>
</div>
```
Question 2: Checking responsiveness
To test responsiveness:
- Open the site in a browser.
- Open Developer Tools (
F12
orCtrl + Shift + I
in Chrome). - Click on the device toolbar (toggle mobile view).
- Check how the iframe behaves on different screen sizes.
Issues to look for:
- If the iframe overflows the screen or is too small.
- If the chat window inside adapts properly to mobile sizes.
Question 3: Next Steps for Further Development
Once we confirm the iframe works responsively, we can move to additional improvements like:
- Dynamic height adjustments based on content.
- Custom styling to better fit your site design.
- Advanced features, such as embedding controls, resizing dynamically, or integrating with your app's UI.
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Wordpress ElementorТехническое задание для верстальщика / разработчика WordPress + Elementor Проект Вёрстка дизайна сайта с Figma на WordPress с использованием Elementor. Дизайн: Figma-дизайн Структура сайта Сайт одностраничный (лендинг), с следующими секциями: Hero /… HTML и CSS верстка, Веб-программирование ∙ 59 минут назад ∙ 17 ставок |
Потрібно перенести дизайн на shopify (для тих хто добре знає Liquid + cursor AI)
24 421 UAH
Всім привіт, є інтернет-магазин https://profimap.de/shop зроблений на wordpress. Потрібно взяти з нього "дизайн" та створити тему для shopify, можна використовувати cursor AI для роботи. Дизайн не складний, нічого особливого, фільтр може трохи відрізнятись, головне щоб був… HTML и CSS верстка, Веб-программирование ∙ 2 часа 12 минут назад ∙ 15 ставок |
Верстка и натяжка 5 страниц Modx Evolution дизайн FIGMA6 страниц для сайта chisto.ua блок карты уже есть на сайте ОСНОВНАЯ страница: блок с 4 категорий картинками баннер с ссылкой лента лого форма заявки Адресная доставка лента лого текст картинка заявка Гарантийный ремонт: Лента лого текст картинка слайдер Послегарантийный ремонт… HTML и CSS верстка, Веб-программирование ∙ 3 часа 36 минут назад ∙ 1 ставка |
Создать сайт на Wordpress и Elementor (есть макет с готовым дизайном)
2500 UAH
Нужно собрать лендинг с поп-апом (через 45 секунд), слайдером и страницей благодарности. Настроить отправку заявок. Макет с готовым дизайном я отправлю в личные сообщения. Мобильная + версия для ПК. HTML и CSS верстка ∙ 3 часа 42 минуты назад ∙ 11 ставок |
По максимуму убрать ресайзы фото товаров Опенкарт 3Нужно провести оптимизацию сайта, убрать ресайзы , оставить базовый 1 ресайз. Подогнать верстку под эти изменения. Цель нужно выйти из лимита inodes. Подробнее в личке. HTML и CSS верстка, Веб-программирование ∙ 4 часа 29 минут назад ∙ 4 ставки |