Breakpoints ohne @media?

Hallo, ich arbeite gerade daran: https://codepen.io/nicerboy/pen/BeBmoN Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint. Mit Media Queries wäre das sehr einfach, aber wie lässt sich das ansonsten machen? Über Hilfe wäre ich sehr, sehr dankbar!

Der hier verwendete Code

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <style> * { font-family: Arial; box-sizing: border-box; font-weight: normal; margin: 0px; padding: 0px; } body { height: 100%; display: flex; background-color: #eee; } #links{ font-size: 40px; } #links, #rechts { width: 100%; height: 100vh; flex: 1 1 auto; flex-direction: column; overflow-y: auto; } #schiebeteil { width: 3px; flex: 0 0 auto; cursor: col-resize; display: flex; justify-content: center; align-items: center; background-color: black; } /* Content */ .content { padding: 10px; } /* The "show" class is added to the filtered elements */ .show { display: block; } #myBtnContainer { margin:0 auto; height:100%; } /* Style the buttons */ .btn { border: none; outline: none; cursor: pointer; background: none; padding-top:10px; font-size: 18px; margin-right:20px; float:right; } .btn:hover { } .btn.active { } img { width: 100%; } .image-content { margin-left: 48px; display:flex; flex-wrap:wrap; justify-content: center; align-items: center; } .column { max-width:49%; min-width:201px; text-align:center; } .main-nav { width:100vh; height:45px; position:fixed; -webkit-transform-origin: left top; -webkit-transform:rotate(-90deg) translateX(-100%); } </style> </head> <body> <article id="links">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </article> <div id="schiebeteil"></div> <article id="rechts"> <section class="main-nav"> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')">All works</button> <button class="btn" onclick="filterSelection('illustrations')">Illustrations</button> <button class="btn" onclick="filterSelection('animations')">Animations</button> </div> </section> <section class="image-content"> <div class="column illustrations"> <div class="content"> <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" > <h3>Mountains</h3> </div> </div> <div class="column illustrations"> <div class="content"> <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" > <h3>Mountains</h3> </div> </div> <div class="column illustrations"> <div class="content"> <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" > <h3>Mountains</h3> </div> </div> <div class="column animations"> <div class="content"> <img src="https://www.uni-weimar.de/fileadmin/user/uni/hauptseiten/Startseite/Buehnenbanner/2019/04/csm_campusoffice_8e3bb1122c.jpg" > <h3>Mountains</h3> </div> </div> </section> </article> <script src="js/jquery-resizable.js"></script> <script> filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } /// <reference path="../bower_components/jquery/dist/jquery.js" /> /* jquery-resizable Version 0.32 - 5/5/2018 © 2015-2018 Rick Strahl, West Wind Technologies www.west-wind.com Licensed under MIT License */ (function(factory, undefined) { if (typeof define === "function" && define.amd) { // AMD define(["jquery"], factory); } else if (typeof module === "object" && typeof module.exports === "object") { // CommonJS module.exports = factory(require("jquery")); } else { // Global jQuery factory(jQuery); } }(function($, undefined) { if ($.fn.resizable) return; $.fn.resizable = function fnResizable(options) { var defaultOptions = { // selector for handle that starts dragging handleSelector: null, // resize the width resizeWidth: true, // resize the height resizeHeight: true, // the side that the width resizing is relative to resizeWidthFrom: "right", // the side that the height resizing is relative to resizeHeightFrom: "bottom", // hook into start drag operation (event passed) onDragStart: null, // hook into stop drag operation (event passed) onDragEnd: null, // hook into each drag operation (event passed) onDrag: null, // disable touch-action on $handle // prevents browser level actions like forward back gestures touchActionNone: true, // instance id instanceId: null }; if (typeof options == "object") defaultOptions = $.extend(defaultOptions, options); return this.each(function () { var opt = $.extend({}, defaultOptions); if (!opt.instanceId) opt.instanceId = "rsz_" + new Date().getTime(); var startPos, startTransition; // get the element to resize var $el = $(this); var $handle; if (options === "destroy") { opt = $el.data("resizable"); if (!opt) return; $handle = getHandle(opt.handleSelector, $el); $handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId); if (opt.touchActionNone) $handle.css("touch-action", ""); $el.removeClass("resizable"); return; } $el.data("resizable", opt); // get the drag handle $handle = getHandle(opt.handleSelector, $el); if (opt.touchActionNone) $handle.css("touch-action", "none"); $el.addClass("resizable"); $handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging); function noop(e) { e.stopPropagation(); e.preventDefault(); }; function startDragging(e) { // Prevent dragging a ghost image in HTML5 / Firefox and maybe others if ( e.preventDefault ) { e.preventDefault(); } startPos = getMousePos(e); startPos.width = parseInt($el.width(), 10); startPos.height = parseInt($el.height(), 10); startTransition = $el.css("transition"); $el.css("transition", "none"); if (opt.onDragStart) { if (opt.onDragStart(e, $el, opt) === false) return; } $(document).on("mousemove." + opt.instanceId, doDrag); $(document).on("mouseup." + opt.instanceId, stopDragging); if (window.Touch || navigator.maxTouchPoints) { $(document).on("touchmove." + opt.instanceId, doDrag); $(document).on("touchend." + opt.instanceId, stopDragging); } $(document).on("selectstart." + opt.instanceId, noop); // disable selection $("iframe").css("pointer-events","none"); } function doDrag(e) { var pos = getMousePos(e), newWidth, newHeight; if (opt.resizeWidthFrom === "left") newWidth = startPos.width - pos.x + startPos.x; else newWidth = startPos.width + pos.x - startPos.x; if (opt.resizeHeightFrom === "top") newHeight = startPos.height - pos.y + startPos.y; else newHeight = startPos.height + pos.y - startPos.y; if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) { if (opt.resizeHeight) $el.height(newHeight); if (opt.resizeWidth) $el.width(newWidth); } } function stopDragging(e) { e.stopPropagation(); e.preventDefault(); $(document).off("mousemove." + opt.instanceId); $(document).off("mouseup." + opt.instanceId); if (window.Touch || navigator.maxTouchPoints) { $(document).off("touchmove." + opt.instanceId); $(document).off("touchend." + opt.instanceId); } $(document).off("selectstart." + opt.instanceId, noop); // reset changed values $el.css("transition", startTransition); $("iframe").css("pointer-events","auto"); if (opt.onDragEnd) opt.onDragEnd(e, $el, opt); return false; } function getMousePos(e) { var pos = { x: 0, y: 0, width: 0, height: 0 }; if (typeof e.clientX === "number") { pos.x = e.clientX; pos.y = e.clientY; } else if (e.originalEvent.touches) { pos.x = e.originalEvent.touches[0].clientX; pos.y = e.originalEvent.touches[0].clientY; } else return null; return pos; } function getHandle(selector, $el) { if (selector && selector.trim()[0] === ">") { selector = selector.trim().replace(/^>\s*/, ""); return $el.find(selector); } // Search for the selector, but only in the parent element to limit the scope // This works for multiple objects on a page (using .class syntax most likely) // as long as each has a separate parent container. return selector ? $el.parent().find(selector) : $el; } }); }; })); $(function() { //$("#top-left").css("height","100%"); }); $("#links").resizable({ handleSelector: "#schiebeteil", resizeHeight: false, resizeWidthFrom: "right" }); $("#rechts").resizable({ handleSelector: "#schiebeteil", resizeHeight: false, resizeWidthFrom: "left" }); $("#top-left").resizable({ handleSelector: "#hori-drag", resizeWidth: false }); $("#bottom-left").resizable({ handleSelector: "#hori-drag", resizeWidth: false, resizeHeightFrom: "top" }); $(".img-btn").on("click", function(e) { let fname = e.target.textContent; $("#main-image").attr("src",fname); }); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!