0

github pages

репозиторий

При уменьшении экрана блок .gallery выходит за границы экрана. Overflow для html и body не помогает (может не туда писал, но обычно помогал)

Другими словами - появляется горизонтальная полоса прокрутки.

4
  • А что именно вы хотите?
    – DiD
    27 ноя 2020 в 16:09
  • @DiD Нужно, чтобы не появлялась горизонтальная полоса прокрутки при уменьшении экрана. То есть, чтобы до экрана в ширину 500px этот блок (.gallery) уменьшался. Я пробовал добавлять для .gallery, .container_gallery и для .group_img a - width: с разными процентами; Возможно получится для самих имг задавать разный width при определённой ширине, но придётся очень много писать top и left для .group_img a.
    – markus
    27 ноя 2020 в 16:14
  • Кстати говоря, на body overflow: hidden у вас как ра и не прописан, зато прописан на html (что бесполезно, так как за границу тега html может попасть только сам body)
    – DiD
    27 ноя 2020 в 16:24
  • попробуйте предложенный мной скрипт. Прямо ничего не меняя копируя-вставляя. Вы можете вставить этот код без <script></script> в консоли браузера без непосредственных изменений на сайте. Отпишите по результатам.
    – DiD
    27 ноя 2020 в 17:17

2 ответа 2

1

Попробуйте вставить где-нибудь в код:

<script>
window.addEventListener('resize',(e)=> { 
  document.querySelector('.container_gallery').style.transform = 
    document.body.clientWidth>1300 ? '' : 
      `scale(${document.body.clientWidth/1380}) translate(${-(1300-document.body.clientWidth)/2}px)`; 
});
</script>

Должно помочь.

4
  • да, скрол не появляется, но блок уходит за пределы страницы, а нужно, чтобы блок даже при 768пх был такой же как и при 1366пх то есть умещался весь в экран.
    – markus
    27 ноя 2020 в 16:24
  • Так это надо было написать в вопросе. У вас галерея с абсолютным позиционированием. Ей надо пересчитывать позиционирование с каждым ресайзом. Либо масштабировать трансформацией браузера, что не очень комильфо делать с фотографиями.
    – DiD
    27 ноя 2020 в 16:27
  • А ты делал когда-то подобное как у меня? Если да, то сложно ли было/муторно?
    – markus
    27 ноя 2020 в 16:28
  • я поменял код в ответе, но в этом коде цифры подобраны вручную. Если вы что-то поменяете, их придется заново подбирать.
    – DiD
    27 ноя 2020 в 17:08
0

прямо в блок gallery (или его класс) впишите overflow-x: scroll, пример:

 <div class="gallery" style="overflow-x: scroll;">
  ...
 </div>

или

 <style>
 .gallery { 
    overflow-x: scroll;
    ...
 }
 </style>
 <div class="gallery">
  ...
 </div>

тогда Ваши фотки станут просматриваемыми на мобильной версии, ну или сюда впишите overflow:hidden, если надо скрыть. также поменяйте на display: inline в блок icons

8
  • В том то и дело, что мне не нужен горизонтальный скрол. Мне нужно, чтобы весь блок gallery умещался в экран (до 500пх) и без какого либо скрола.
    – markus
    27 ноя 2020 в 16:18
  • Вам надо его растянуть/сжать или обрезать?
    – ktscript
    27 ноя 2020 в 16:25
  • сжать и именно сам блок, а не имгшки по отдельности.К примеру экран 768пх и этот блок должен быть таким как и при экране 1366пх
    – markus
    27 ноя 2020 в 16:27
  • у Вас все фотки в абсолютных величинах стоят
    – ktscript
    27 ноя 2020 в 16:32
  • замените на position:relative, тогда получите то, что хотите
    – ktscript
    27 ноя 2020 в 16:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.