Создавая веб-сайт с помощью Zurb Foundation, я использую функцию вне холста.
По умолчанию ширина областей вне холста составляет 250 пикселей, и я хотел бы увеличить ее, скажем, до 600 пикселей.
К сожалению, когда я увеличиваю ширину холста, он становится видимым при загрузке ...
Кроме того, я заметил, что когда вы расширяете или закрываете вне холста, если он больше 250 пикселей, «слайд» работает только для 250 пикселей.
Вот HTML-код для тестирования:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
<style>
#off-canvas-right {
width: 600px;
}
</style>
</head>
<body>
<div class="off-canvas position-left" id="off-canvas-left" data-off-canvas>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque, eligendi. Deleniti rerum, distinctio tempora laboriosam velit incidunt hic asperiores officiis alias ea, sequi libero animi soluta totam, quia veritatis.
</div>
<div class="off-canvas position-right" id="off-canvas-right" data-off-canvas>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptate velit, labore, voluptatem quia laborum temporibus asperiores at eos nulla nam ab fugit tenetur quaerat iusto architecto eum ea explicabo.
</div>
<div class="off-canvas-content" data-off-canvas-content>
<a data-open="off-canvas-left" class="text-center">Open left</a>
<a data-open="off-canvas-right" class="text-center">Open right</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Есть идеи, которые помогут решить эти 2 проблемы?