Have spent a couple of days on this, rebuilt the page using another template, tried the advices online which led me to breaking the layout further yet. I'm more of a designer and less of a programmer and cant find what else can i try. Please help! Problems I face: the worst: the divs overlap each other. Then the carousel in the middle used to be centered and now its not any more, it doesnt care about margin:auto either. And then vertical scroll has appeared. All these problems have to do with the responsive layout I have tinkered with trying to solve overlapping divs. The layout in good mood/screen size looks like this: good large screen layout.
The worst screen size returns this: all wrong layout
Stripped down code of my page:
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/magnificpopup.css">
<link href="stylesheet.css" rel=stylesheet type="text/css">
<style>
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-white w3-collapse w3-top w3-large w3-padding-large" style="z-index:3;width:350px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h3 class="w3-padding-64"><br></h3>
</div>
<div class="w3-bar-block">
<nav id="menu" class="leftDivPosition">
<header>
<a href="index.php">
<div class="logotype"><img src="images/logo.gif" alt="logo"></div>
</a>
</header>
<ul>
<li><div class="menuText">Photoshop</div></li>
<li><div class="menuText">Graphic design</div></li>
<li><div class="menuText">Product design</div><li>
<div class="menuText">3D</div></li>
<li><div class="menuText">About me</div></li>
<li><div class="menuText">Contacts</div></li>
</ul>
</nav>
</div>
</div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-white w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-grey w3-margin-right" onclick="w3_open()">☰</a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-row" style="margin-left:340px;margin-right:15px">
<!-- Main -->
<div class="w3-col m9 19">
<div class="w3-container" id="designers" style="margin-top:75px">
<div style="margin:auto;">
<ul style="list-style-type:none;" id="carousel">
<li><a class="magnificpopup" href="images/cookbook_cover_th.jpg">
<img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/></a></li>
<li></li>
</ul>
</div> </div>
</div>
<!--right sidebar -->
<div class="w3-col m3 13">
<div class="w3-row" id="designers" style="margin-top:100px; overflow:visible;">
<div>
<div class="w3-col m7 w3-margin-bottom w3-padding">
<div class="w3-container w3-padding-large">
<ul>
<li><a href="http://facebook.com/"><i></i></a></li>
<li><a href="http://linkedin.com/"><i></i></a></li>
</ul>
</div>
</div>
<!--vertical copyright for big screens -->
<div class="w3-container w3-col m5 w3-padding-large w3-hide-small">
<p style="-webkit-transform:rotate(90deg) !important;-moz-transform:rotate(90deg) !important;-o-transform: rotate(90deg !important);-ms-transform:rotate(90deg !important);transform: rotate(90deg !important);white-space:nowrap !important;display:block !important;width:20px;">© 2014 – 2017 Vidaldigital.com. All Rights Reserved.</p>
</div>
<!--horisontal copyright for small screens -->
<div class="w3-container w3-col m4 w3-padding-large w3-hide-medium w3-hide-large"> <p>© 2014 – 2017 Vidaldigital.com</p>
</div>
</div>
</div>
</div>
<!-- End page content -->
</div>
</body>
</html>
Im using mostly css from w3.css file and built the design on their Interior design template. My own CSS is minimal and has no relevance to the reponsive layout, and I assume the same with the script adjustments of the carousel but of course I can share everything in case if I can get some help..
I must even add that when inserting the jQuery carousel in otherwise completely untouched template, it still overlaps the right sidebar and other content. If the problem might be in the carousel Im even adding the modifications I have done:
<script type="text/javascript">
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
startingItem: 1, // item to place in the center of the carousel. Set to 0 for auto
separation: 255, // distance between items in carousel
separationMultiplier: 0.6, // multipled by separation distance to increase/decrease distance for each additional item
horizonOffset: 0, // offset each item from the "horizon" by this amount (causes arching)
horizonOffsetMultiplier: 1, // multipled by horizon offset to increase/decrease offset for each additional item
sizeMultiplier: 0.6, // determines how drastically the size of each item changes
opacityMultiplier: 0.7, // determines how drastically the opacity of each item changes
horizon: 0, // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
flankingItems: 2, // the number of items visible on either side of the center
// animation
speed: 3000, // speed in milliseconds it will take to rotate from one to the next
animationEasing: 'swing', // the easing effect to use when animating
quickerForFurther: true, // set to true to make animations faster when clicking an item that is far away from the center
edgeFadeEnabled: true, // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image
// misc
linkHandling: 2, // Determines behavior of links that are placed around the images. 1 to disable all (if you want to use the callback functions to do something special with the links; or used for facebook), 2 to disable all but center (to link images out).You can wrap all of the images in links if you'd like. Most people will probably want to add links around each image, but only activate the links when the center item is clicked. This is the default use case. However, you can turn all of the links off if you prefer using the callback functions to handle the links.
autoPlay: 300, // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Positive value for a left to right movement, negative for a right to left.
orientation: 'vertical', // indicate if the carousel should be 'horizontal' or 'vertical'
activeClassName: 'carousel-center', // the name of the class given to the current item in the center
keyboardNav: true, // set to true to move the carousel with the arrow keys
keyboardNavOverride: false, // set to true to override the normal functionality of the arrow keys (prevents scrolling)
imageNav: true, // clicking a non-center image will rotate that image to the center.False to disable that functionality, which is commonly paired with navigational buttons instead.
// preloader
preloadImages: true, // disable/enable the image preloader.The carousel will attempt to preload all images before initializing. This is known to have some issues in certain browsers. The main reason for the preloader is too be able to determine the dimensions for each image before running calculations. If you run into issues, disable this and use the forced proportions below (or set your image dimensions using CSS).
forcedImageWidth: 0, // Set a global width that should be applied to all images in the carousel. specify width of all images; otherwise the carousel tries to calculate it
forcedImageHeight: 0, // Set a global height that should be applied to all images in the carousel. specify height of all images; otherwise the carousel tries to calculate it
// callback functions
movingToCenter: $.noop, // fired when an item is about to move to the center position
movedToCenter: $.noop, // fired when an item has finished moving to the center
clickedCenter: $.noop, // fired when the center item has been clicked
movingFromCenter: $.noop, // fired when an item is about to leave the center position
movedFromCenter: $.noop
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
});
</script>
