Page template and slick navigation responsiveness

frederikwalle · January 14, 2019, 4:17pm

Hi guys since my last post here I have made some great progress thanks to PaulOB. Unfortunately at this point I’m stuck (again) and some expertise would be much appreciated.

I’m quite happy with my layout but I’m struggling with the slick slider from ken wheeler (http://kenwheeler.github.io/)

The slider does not scale image the way I would like . Looking around the web at other sliders I have seen it looks like the entire slider container shrinks in height and the images shrink so everything scales nicely . I’m not sure how I could get the slick slider to become responsive?

Bellow is a pen of my project:

(athe navigation is not fully responsive nor complete at this point as I balance back and forwards between the navigation, slider and content and I make changes to everything as I add more and more content)

So it this point I’m especially stuck with the slick slider trying to get it to become more responsive.

I found this code from other page that have a nice slider:And I wonder if this can makes some wonders to my slider, but when I add this in my CSS file I see no effect

.bx-wrapper img {

   max-width: 100%;

   display: block;

 }

Ill take any help as well as critique to my work
Frederik

PaulOB · January 14, 2019, 5:51pm

You seem to be squishing/stretching the image rather than letting it maintain its aspect ratio. For modern browsers you could use object-fit like this.

.img-fill img{object-fit:cover}

The actual slider itself does seem to be responsive as it adjusts in size as you get larger or smaller.

These sliders are notoriously hard to get right and deviating from the original is often very troublesome unless you are following the settings that have been already built into the slider.

frederikwalle · January 14, 2019, 6:05pm

Yeah I was thinking along these lines.
a look trough the slick.min.js revels 700 lines of code seams unnecessarily for my need. I think based on your reply I will drop the slick slider completely (but keep the animatemin.css) Its to much settings…

Will be a a troublesome job to build a slider from scratch as I do not know anything . I tried looking for some slider walkthrough guide and founds something over at W3 schools but did not like how they promote their own respiratory for their slider. Do you have any suggestions as to where I should start ?

frederikwalle · January 14, 2019, 7:34pm

Ok so I scratched everything and updated the pen to reflect my changes

Hopefully this might work better but this brings a lot of questions The most pressing would be that the slider “escapes” the <nav> and the main on zoom <main>

this slider is based on this sample here: https://www.w3schools.com/howto/howto_js_slideshow.asp
and I think this might be a good starting point. The overall plan is to make it work exactly as the slick slider. anyhelp to get this up and running would be great

Edit: There was alot of errors with the html markup. I fixed and cleaned it so that you could read it… But it did not fix any “real problems”

~~Also moving down gave me desire result. with the zoom levels~~
No this looks super weird when zooming all the way out

PaulOB · January 14, 2019, 9:03pm

Not sure what you meant by that exactly?

Looks ok to me on zoom but as I mentioned before I think you are mistaking zoom for some sort of layout viewer. Nothing can stand exorbitant zooms and something will break after a few resizes because pixels simply can’t scale uniformly and 100% widths are confined to 100%. Zoom is an aid to reading the text and not meant as a perfect site enlarger.

If you are talking about the animating captions then you can do that with css transitions and animations. If you want the slider to autorun then that will be a job for JS.

I am not back until tomorrow afternoon now so someone else can jump in or it will give you time to work in the design some more.

frederikwalle · January 14, 2019, 9:22pm

You are helpful as always Paul

Since I posted this I have at least made 3 changes to the Pen. I think I´ll take a break for today as well. Gives me some time to reflect on the problems but I think I have made some good progress: cleaned up the html and css…

Ok Ill stop doing saying/doing that but you know what I mean As I mentioned above I have made some changes and I think I was able to fix this. but I really hate how the image behaves when scaling down/up I really need help here. I´m not sure how this is normally done ?

I thought about using 2 img for this slider, 1 for background and one images as overlay. E.g. monitor.png on top of the background. (I made all of this in Photoshop)
but this of course complicates things. But these img might not look good on small screens no matter what. so 2 images gives better control.

Yes there should be some JS here but that is totally fine . I found this for animation which works great:

What I mean Is that I would like to add sliding effect for the different slides so the screen slides in both from right and left.
Edit: I have been able to add slide in right effect now I would need to add slide away left for the previous img… still work in progress

I´ll put in some more work gives me more time to for trial and failure :

Thanks for you help

frederikwalle · January 15, 2019, 5:12pm

Ok so I have made some progress here I dont know if you have time for a quick look.

I have been working on adding (slider effect, wip) and it looks like that for the JS to work I would need to put the slider divs as:

position: absolute;

And this really messes up the page. Do you have a suggestion or how I could arrange the site while having it with an absolute positioning?

Pen:

PaulOB · January 15, 2019, 9:48pm

Yes most sliders use absolute positioning for their slider divs/images (the main slider container should be position relative) but the problem is that you would then need to give the slider container the same height as the slider divs otherwise it has no height because its absolute children take up no space.

It looks like you are hard coding the slider divs at 440px anyway so you could match the slider container height with a fixed height also and preserve the flow of the page.

The problem with this approach is that you are hard coding the heights and this is not good for a responsive layout as you want the height to get bigger and smaller along with the image resizing. You really need a method that caters for that. You could fake it with some adaptive media queries (change the height at certain breakpoints) but you would need to make sure your images remain at 100% height (object-fit:cover as mentioned before will retain the aspect ratio - or use background images and background-size:cover instead).

As I mentioned before sliders are complex and if you want bells and whistles then you need to go with something off the shelf rather than trying to re-invent the wheel yourself. There are many sliders/carousels about and I’m sure there’s one that fits your exact needs.

I’ll have a look tomorrow and see if I can find something better that suits your needs.

frederikwalle · January 15, 2019, 10:16pm

Hi thanks for your reply
working with this has been a real nightmare

This is what I have been trying to do. But this is where my nightmare started today. as you mention it looks like after adding position absolute the document flow behaves so strange. I have tried a lots of different settings but no matter what I can not seam to get the div “more info” I´m not quite sure how the layout should be. And its also quite annoying as I really feel like I´m close to solving this puzzle…

I´m really not married to the hard coded height

Thanks I will look forward to your reply (as always )

PaulOB · January 16, 2019, 5:46pm

HI,

Sorry I’ve not been much help in this thread

I’ve had a look at what you’ve got but unfortunately I can’y give you a full solution without spending a couple of days writing my own slider.

I can show you how it could be responsive but you would need to re-write the slider code so that it animates correctly because the elements are no longer absolute. When the next slide slides in the first one disappears because of the display:none in the script and should really be animated to the left and then made display:none once it finishes. This would be a job for the JS forum (I can write my own snippets but modifying existing JS is not my forte).

Anyway here is the revised code which I have put into one package so you can just copy and paste and test locally.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
	margin: 0;
	font-family: 'Lora';
	font-size: 1.1em;
	background: #d1d1d1;
	overflow: scroll;
	height: 100vh;
	min-height: 100%;
}
.noscroll {
	margin: 0;
	height: 100%;
	overflow: hidden !important;
}
a {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	font-size: 0.9em;
}
a:hover {
	text-decoration: none;
	color: white;
}
a:hover, a:visited, a:link, a:active {
	text-decoration: none;
	color: white;
}
ul {
	padding: 0;
	list-style: none;
}
/* http://paletton.com/#uid=70a0u0kp9qZfr-Okttws8m2vYhd*/
/* Var Colors */
:root {
 --colorW: rgba(232,232,232,1);
 --colorB: #333;
 --color-2: #1E406E;/* Darkest */
 --color-1: #335485;/* Darker */
 --color0: #4E6D9C;/* Primary */
 --color1: #7691B9;/* Lighter */
 --color2: #AABDDA;/* Lighter */
 --color3: #ECD26B;/* Complement Color */
 --color4: #ED9E6B;/* Complement Color */
 --color5: #d7512e;/* Complement Color */
}
/* Text Colors */
.txt-color0, .txt0 a, .txt00 li a, .txt0 li .txt0 li a {
	color: rgba(232,232,232,1); /* White */
}
.primary1, .txt1, .txt1 a, .txt1 li, .txt1 li a {
	color: #4E6D9C;
}
.primary2, .txt2, .txt2 a, .txt2 li, .txt2 li a {
	color: #335485; /* Darker */
}
.primary3, .txt3, .txt3 a, .txt3 li, .txt3 li a {
	color: #1E406E; /* Darkest */
}
.primary4, .txt4, .txt4 a, .txt4 li, .txt4 li a {
	color: #7691B9; /* Lighter */
}
.primary5, .txt5, .txt5 a, .txt5 li, .txt5 li a {
	color: #AABDDA; /* Lightest */
}
.complement1, .txt6, .txt6 a, .txt6 li, .txt6 li a {
	color: #ECD26B;/* Lightest */
}
.complement2, .txt7, .txt7 a, .txt7 li, .txt7 li a {
	color: #ED9E6B;/* Lightest */
}
/* Background classes*/
.bgW {
	background: rgba(232,232,232,1);
}
.bgB {
	background: #333;
}
.bg-2 {
	background: #1E406E;
}
.bg-1 {
	background: #335485;
}
.bg0 {
	background: #4E6D9C;
}
.bg1 {
	background: #7691B9;
}
.bg2 {
	background: #AABDDA;
}
.bg3 {
	background: #ECD26B;
}
.bg4 {
	background: #ED9E6B;
}
/* text classes*/
.txtW, .txtW a {
	color: rgba(232,232,232,1);
}
.txtB, .txtB a {
	color: #333;
}
.txt-2, .txt-2 a {
	color: #1E406E;
}
.txt-1, .txt-1 a {
	color: #335485;
}
.txt0, .txt0 a {
	color: #4E6D9C;
}
.txt1, .txt1 a {
	color: #7691B9;
}
.txt2, .txt2 a {
	color: #AABDDA;
}
.txt3, .txt3 a {
	color: #ECD26B;
}
.txt4, .txt4 a {
	color: #ED9E6B;
}
.txt5, .txt5 a {
	color: #cc3333;
}
/* Header1*/
.secondary-header {
	display: flex;
	height: 35px;
	top: 0;
	background: #4E6D9C;
	background:#2c3033;
}
.top-wrap {
	text-align: center;
	flex-direction: column;
	width: 80%;
	display: flex;
	height: 35px;
	margin: auto;
	max-width: 1170px;
}
.top-bar {
	display: flex;
	text-align: center;
	flex-flow: row wrap;
	height: 55px;
	align-items: center;
	line-height: 35px;
}
.top-bar a {
	font-family: "Helvetica Neue", Helvetica, Arial;
	padding-right: 5px;
	color: #6E6E74;
	font-size: 12px;
}
.top-bar li .dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	padding: 0;
	margin: 0;
	margin-top: 3px;
	text-align: left;
}
.currency {
	margin-left: 10px;
}
/* End 
   Main Header */
.header {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 70px;
	z-index: 999;
	position: relative;
	width: 100%;
	border-bottom: 3px solid #BCBCD4;
	background-color: #fafafb;
	transition: all 0.3s ease-in-out;
}
.nav-wrapper {
	text-align: center;
	flex-direction: row;
	width: 80%;
	display: flex;
	align-items: center;
	height: 70px;
	margin: auto;
	max-width: 1170px;
}
.wrap {
	max-width: 1170px;
	margin: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.main_navigation {
	display: flex;
	height: 70px;
	align-items: center;
	padding: 0 10px;
	font-size: 0.9em;
	margin-left: auto;
}
.main_navigation a {
}
.link {
	padding: 0 15px;
	height: 100%;
	line-height: 70px;
}
.header .active {
	background: #202125;
	background: linear-gradient(to bottom, #2C3033 96%, #34495e 96%, #D7512E 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header .active a {
	color: #6E6E74;
}
.main_navigation li.active:hover {
	/* Disable hover effect on active class */
	background: #5F95AF;
	background: linear-gradient(to bottom, #2C3033 96%, #34495e 96%, #D7512E 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.main_navigation li:hover {
	background: linear-gradient(to bottom, #e6e6e6 96%, #34495e 96%, #D7512E 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	cursor: pointer;
	color: #7691B9;
}
.brand-container {
	position: relative;
	display: block;
	flex-direction: column;
	flex-wrap: wrap;
}
.main-logo {
	height: 100%;
	position: relative;
	display: flex;
	/* or inline-flex */
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	margin-right: 30px;
}
.main-logo h1 {
	font-family: 'Allerta', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 22px;
	color: #cc3333;
	padding-bottom: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-weight: normal;
}
.main-logo .div2 {
	margin-top: 0px;
	padding-top: 0px;
	position: relative;
	font-family: 'Allerta', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: row;
	font-size: 9px;
	color: #333;
	margin-left: 1px;
	font-style: italic;
}
.contact {
	margin-right: auto;
}
.Features {
	position: relative;
}
.signin a {
	color: #7E97BB;
}
.hamburger, .mobile-user {
	display: none;
}
.mobile-user {
	font-size: 2em;
	color: var(--color4);
}
.hamburger {
	width: 35px;
	height: 35px;
	position: relative;
	border-radius: 100%;
	border-right: 1px solid rgb(204, 51, 51, .4);
}
.hamwrap {
	position: relative;
	transform: translateY(-50%);
	top: 50%;
	height: 50%;
	width: 22px;
	margin: 0 auto;
}
.bar1, .bar2, .bar3 {
	background: var(--color0);
	margin-left: 0px;
	width: 22px;
	height: 3px;
	transition: 0.2s;
	border-radius: 4px;
}
.bar2, .bar3 {
	margin: 5px 0px;
}
.bar2 {
	transition: 0.3s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-80px, 6px);
	transform: rotate(-45deg) translate(-5px, 6px);
	left: -10px;
}
.change .bar2 {
	position: relative;
	width: 0;
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-5px, -6px);
	left: -10px;
}
.change .bar1, .change .bar3 {
	position: relative;
	left: -1px;
}
.signup {
	display: flex;
	margin-left: auto;
}
.Signup a {
	font-size: 14px;
}
.buttonstyle2 a {
	font-size: 14px;
}
.Signup:hover {
	background-color: #335485 !important;
	box-shadow:3px 3px 0px 0px #335485, -3px -3px 0px 0px #335485, 3px -3px 0px 0px #335485, -3px 3px 0px 0px #335485;
}
.Signup .fa-user, .fa-sign-in-alt {
	font-size: 15px;
}
.buttonstyle2 {
	margin-left: 15px;
	background: rgba(78,109,156,0);
	border: 1px solid #7E97BB;
	border-radius: 5px;
	transition: 0.4s !important;
	height: 35px;
	padding-left: 15px;
	padding-right: 15px;
	color: #6155A4;
}
.buttonstyle2:Hover {
	background-color: rgba(230,230,230,1);
}
/* Ipad Pro*/
@media only screen and (max-width: 1024px) {
.nav-wrapper {
	width: 100%;
	margin-left: 0px;
	padding-left: 5px;
	padding-right: 5px;
}
}
/* mobile/tablet version*/
@media only screen and (max-width: 768px) {
.nav-wrapper {
	padding-left: 0px;
}
.main_navigation {
	padding-left: 0px;
}
.nav-wrapper {
	width: 100%;
}
.header {
	padding-left: 0px;
	padding-right: 0px;
}
.mobile-user {
	display: flex;
	margin-right: auto;
}
.link, .signup, .signin {
	display: none;
}
.main-logo {
	margin-right: auto;
}
.hamburger {
	margin-right: 10px;
	display: flex;
}
.Modern-Slider .Gallery-Slider .img-fill {
	height: 300px;/* Added */
}
.Features {
	margin-left: auto;
}
}
@media only screen and (min-width: 769px) {
.Modern-Slider .Gallery-Slider:hover .PrevArrow {
	opacity: 1 !important;
}
.Modern-Slider .Gallery-Slider:hover .NextArrow {
	opacity: 1;
}
}
.site-navigation div {
/* -webkit-transition: width 2s;
	*/
	/* transition: 2s;
	*/
}
.site-navigation div:hover {
	color: rgb(28, 121, 184);
}
/* Animated Bottom Line */
.site-navigation div:after {
	content: '';
	position: relative;
	display: block;
	width: 0;
	height: 2px;
	top: 0px;
	background: rgb(28, 121, 184);
	transition: width .5s;
}
.site-navigation div:hover::after {
	width: 100%;
 //transition: width .3s;
}
/* Overlay */
.overlay {
	/* Magic number */
	width: 100%;
	position: fixed;
	/* Stay in place */
	z-index: 9999;
	/* Sit on top */
	left: -100%;
	top:6rem;
	bottom:0;
	background-color: #f1f1f1;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	transition: left 0.5s;
	overflow-y: scroll;
}
.overlayopen {
	left: 0;
}
/* Position the content inside the overlay */
.overlay-content {
	margin-top: 5px;
	/* Magic number */
	position: relative;
	width: 100%;
	/* 100% width */
	color: #1E406E;
}
/* Search Container */
.searchContainer {
	display: inline-flex;
	justify-content: Center;
	width: 96%;
	margin-left: 2%;
	margin-bottom: 10px;
	top: -6px;
	position: relative;
	flex-direction: row;
	padding: 2px 5px;
	overflow: hidden;
	background:#f4f4f4;
	background:rgba(244,244,244,.79);
	border: 1px solid #d3d3d3;
	box-shadow:0 4px 9px rgba(0,0,0,.37);
	-moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
	-webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px
}
.cf:before, .cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.searchContainer input {
	background:#fefefe;
	border: none;
	font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	margin-right: 5px;
	padding: 10px;
	width: 216px;
	box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px
}
.searchContainer input:focus {
	outline: none;
	box-shadow:0 0 4px #0d76be inset;
	-moz-box-shadow:0 0 4px #0d76be inset;
	-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchContainer input::-webkit-input-placeholder {
 font-style: italic;
 line-height: 15px
}
.searchContainer input:-moz-placeholder {
 font-style: italic;
 line-height: 15px
}
.searchIcon {
	padding: 15 15 15 15;
	margin-right: 10px;
}
.searchBox {
	border: 0;
	padding: 0.5rem 0.5rem 0.5rem 0;
	flex: 1;
}
.searchButton {
	border-right: 1px solid var(--color4);
	background: rgb(30,64,110);
	border: none;
	color:#fff;
	cursor: pointer;
	font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	padding: 10px;
	width:106px;
	box-shadow: 0 0 2px #2692dd inset;
	-moz-box-shadow: 0 0 2px #2692dd inset;
	-webkit-box-shadow: 0 0 2px #2692dd inset;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}
/* END Search Container */
.link-container {
	display: flex;
	/* or inline-flex */
	flex-wrap: wrap;
	justify-content: Center;
}
.overlay-link {
	border: 1px solid #4E6D9C;
	width: 32%;
	height: 110px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	line-height: 30px;
}
.overlay-link:hover {
	background: #AABDDA;
}
.overlay-link a:hover {
	color: #1E406E;
}
.overlay-link:nth-child(1) {
	border-bottom: none;
	border-top-left-radius: 5px;
}
.overlay-link:nth-child(2) {
	border-left: none;
	border-bottom: none;
}
.overlay-link:nth-child(3) {
	border-left: none;
	border-bottom: none;
	border-top-right-radius: 5px;
}
.overlay-link:nth-child(4) {
	border-bottom-left-radius: 5px;
}
.overlay-link:nth-child(5) {
	border-left: none;
}
.overlay-link:nth-child(6) {
	border-left: none;
	border-bottom-right-radius: 5px;
}
/* The navigation links inside the overlay */
.overlay-link a {
	text-decoration: none;
	font-size: 28px !important;
	display: block;
	/* Display block instead of inline */
	font-size: 1.0em;
	letter-spacing: 1.2px;
	font-family: 'Oxygen';
}
@media screen and (min-width:769px) {
.overlayopen {
	display:none;
}
}
/* ==== Slider Style === */
* {
	box-sizing:border-box
}
/* Slideshow container */
.slideshow-container {
	position: relative;
	display: flex;
	overflow:hidden
}
.slideshow-container img {
	height: auto;
	display: block;
}
/* Hide the images by default */
.mySlides {
	flex:1 0 100%;
}
/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
.Slick-Navigation {
	position: absolute;
	display: flex;
	flex-direction: row;
	bottom: 12px;/* must be inside slide area*/
	left: 50%;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	padding: 5px 10px 5px 10px;
	margin: 0 auto;
}
/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin: 0 3px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}
.slideInRight {
	animation: slideInRight 1.5s;
	animation-duration: 1.5s;
}
.slideOutLeft {
	animation: slideOutLeft 1.5s ;

}
@-webkit-keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}
 @keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}
/* ==== Main === */
.main {
	background: #f7f7f7;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom:80px;
}
.test {
	top: 0;
	height: 482px;
	width: 100%;
	background:#d7512e;
	background: linear-gradient(to bottom, #A5A5A5 50%, #34495e 50%, #d1d1d1 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.moreinfo {
	position: relative;
	background: #12141B;
	color:#fff;
	border-top: 5px solid #202125;
	border-bottom: 10px solid #D7512E;
	-webkit-box-shadow: 0px 2px 0px 1px #C8C8C8;
	-moz-box-shadow: 0px 2px 0px 1px #C8C8C8;
	box-shadow: 0px 2px 0px 1px #C8C8C8;
}
.main-wrapper {
	padding-top: 25px;
	max-width: 1170px;
	margin: 0 auto;
}
/* ==== Footer content === */
.footer {
	border-top: 5px solid #737370;
	background: #3c3c3b;
	background: #202125;
	padding: 10px;
	color: #fff;
	width: 100%;
	bottom: 0;
	clear: both;
	position: relative;
	margin-top: -40px;
}
.footer-wrap {
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: 1170px;
	display: flex;
	flex-direction: row;
	margin-left: auto;
	margin-right: auto;
}
.footer-col {
	display:flex;
	flex-direction: column;
	list-style: none;
	margin-top: 40px;
	border: 1px solid #FFF;
	flex: 1;
	margin-bottom: 15px;
}
.footer-col {
	flex: 0 0 285px;
}
.list {
	margin-top: 0px;
	padding-top: 0px;
}
.footer h6 {
	padding: 0px 0px 0px;
	margin: 10px 0px 10px;
	font-family: "Open Sans";
	font-size: 16px;
}
.footer-col li {
	padding: 5px 0px;
}
.footer-col li a {
	font-family: "Open Sans";
	color: #737370;
	font-size: 14px;
}
.about {
	max-width: 1170px;
	border-top: 1px solid #737370;
	border-bottom: 1px solid #737370;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	padding-top: 20px;
	padding-bottom: 20px;
}
.about-col1 {
	width: 70%;
	height: 100px;
}
.about p {
	font-family: "Open Sans";
	color: #737370;
	font-size: 14px;
	max-width: 70%;
}
/* ==== END === */
</style>
</head>

<body class="bodytop">
<div class="secondary-header">
  <div class="top-wrap">
    <ul class="top-bar">
      <li><a href="">Language:</a></li>
      <li class=""><a href="">English <i class="fas fa-angle-down"></i></a></li>
      <li><a href="" class="currency">Currency:</a></li>
      <li class=""><a href="">USD <i class="fas fa-angle-down"></i></a></li>
    </ul>
  </div>
</div>
<header class="header">
  <div class="nav-wrapper">
    <div class="hamburger" id="togglebutton">
      <div class="hamwrap"> <a href="javascript:void(0);" onclick="toggle_menu()">
        <div class="bar1 bg2"></div>
        <div class="bar2 bg2"></div>
        <div class="bar3 bg2"></div>
        </a> </div>
    </div>
    <div class="main-logo"> <a href="#home">
      <h1 class="div1">Brand</h1>
      <div class="div2">Powered by imagination</div>
      </a> </div>
    <ul class="main_navigation">
      <li class="link txt0 active"><a href="#home">Home</a></li>
      <li class= "link txt0 Features">Features</li>
      <li class= "link txt0">Service</li>
      <li class= "link txt0">About</li>
      <li class= "link contact txt0">Contact</li>
      <li class= "link contact txt0">Blog</li>
      <li class="txt0 mobile-user nav-item"> <i class="fas fa-user"></i> </li>
    </ul>
  </div>
</header>
<!-- overlay -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="searchContainer cf">
      <input class="searchBox" type="search" name="search" placeholder="Search the site...">
      <button type="submit" class="searchButton">Search</button>
    </div>
    <div class="link-container">
      <div class="overlay-link"> <a><i class="fas fa-user"></i></a> Login </div>
      <div class="overlay-link"> <a><i class="fas fa-home"></i></a> Home </div>
      <div class="overlay-link"> <a><i class="fas fa-cogs"></i></a> Service </div>
      <div class="overlay-link"> <a><i class="fas fa-info-circle"></i></a> About </div>
      <div class="overlay-link"> <a><i class="fas fa-address-book"></i></a> Contact </div>
      <div class="overlay-link"> <a><i class="fas fa-star"></i></a> More </div>
    </div>
  </div>
</div>
<!-- Slideshow container -->
<div class="slideshow-container"> 
  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="http://i67.tinypic.com/ri66hj.png" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="http://i67.tinypic.com/5b34pc.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="http://i64.tinypic.com/2e0p94l.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <!-- Next and previous buttons --> 
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div class="Slick-Navigation"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
</div>
<!-- The dots/circles -->

<div class="moreinfo">
  <h2>What's this area for -I don't know ?</h2>
</div>
<!--Wrappers-->
<main class="main">
  <div class="main-wrapper">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
</main>
<!-- // End wrapper -->
<footer class="footer">
  <div class="footer-wrap">
    <div class="footer-col col1">
      <h6 class="nav-title">Site Informaion1</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h6 class="nav-title">Site Information2</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h6 class="nav-title">Site Informaion3</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col col4">
      <h6 class="nav-title">Site Informaion4</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
  </div>
  <section class="about">
    <div class="about-col1">
      <h6 class="nav-title">About us</h6>
      <p> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <div class="about-col2">
      <h6 class="nav-title">Contact us</h6>
    </div>
  </section>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
function toggle_menu() {
  const navs = document.querySelectorAll('.site-navigation')
  var element = document.getElementById("togglebutton");
  $(".site-navigation").toggleClass("mobilenav"); 
  $(".bodytop").toggleClass("noscroll"); 
  $(".hamburger").toggleClass("hamchange"); 
  $(".nav-wrapper").toggleClass("mobile-wrap"); 
  $(".overlay").toggleClass("overlayopen"); 
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  element.classList.toggle('change');

  

}

function toggleanimation(x) {
    x.classList.toggle("change");
}
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n); 
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
	  slideIndex = 1
	  } 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
	  if (slides[i].classList.contains('slideInRight')) { 
	  }
	  slides[i].classList.remove("slideInRight");
	  slides[i].classList.remove("slideOutLeft");
	  slides[i].style.display = "none"; 
	  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }


  slides[slideIndex-1].style.display = "inline-block"; 
  slides[slideIndex-2].style.display = "none"; 
  slides[slideIndex-2].classList.add("slideOutLeft");

  slides[slideIndex-1].classList.add("slideInRight");
  dots[slideIndex-1].className += " active";
}

</script>
</body>
</html>

The slick slider you originally had is supposed to be responsive and there is someone else’s demo here on codepen.

I have used BXslider in the past but that was a while ago now.

frederikwalle · January 16, 2019, 8:45pm

I think you have been helpful. and thanks for taken your time making that little package
I have taken a break today but will resume tomorrow. Its not my intention that you should write a slider for me : Much appreciated for you css update I will have a look later. As you said the JS will not work with this I will see what I can make with extensive google searching…

Was it not possible to get this to work while the slider elements is position = absolute ? I was able to make something work in JS the only problem was the flow of the page got messed up completely . To be honest I think I just have a small error somewhere. . . but I do not know CSS and html like you do…

I did not make much change to it I just added height 440 px. Other sliders I have seen typically scales the img downward and the slider also get less and less height I think. I think this is a good solution.
maybe all of the responsive stuff is done with JS ?

This one looks identical to the one from W3 School . I think the tricky part is adding the fancy sliding effect, was it drums and whistles you said ?

If I where to go for fade effects I think the slider that I currently have will work perfectly especially with you suggested CSS , maybe I could for now just keep fade effect and revisit the code in a couple of months when my skill level has reached a new level.

frederik

Edit: Just tested this and this looks very nice

I think I can come up with an animation idea here.
Also I liked you H2 comment "what is this area for? " Plan is to add 3 columns here with some general information

frederikwalle · January 20, 2019, 8:59am

Hi Paul I have been searching the net for a suitable slider this weekend and I think I found one here:

Flickity-slider what do you think ?

Also I think I finally learned the difference between zoom and scaling , because when I hit ctr+ on my computer this slider is not responsive however when doing it correctly like you have told me > re-scaling the browser window it behaves exactly like it should, so that´s a level up for me

PaulOB · January 20, 2019, 11:22am

Yes that one’s OK but is not truly responsive as it has a fixed height. It will adapt to various screen widths simply because the background image fills the space as best it can. A truly responsive slider would reduce the height of the slider also so that it isn’t so tall on small screens. However those are harder to code as sliders are easier with fixed heights.

I’m guessing you could reduce the height for smaller screens using a media query but I haven’t tested this (sometimes sliders set the height dynamically). There is always a trade-off when using a slider so you just choose the one that best fits your purpose.

You should always bear in mind that most ‘savvy’ web users hate sliders

http://shouldiuseacarousel.com/

frederikwalle · January 20, 2019, 11:29am

Lol thanks for the info.
Seams like the stuff that I fixate on the most are stuff that the professionals don´t like

I also found this one regarding hamburger menu:

For now I keep both of these. Atm im working on creating better class names as the one I have are horrible. Also I made the mistake of naming to many of the classes for “main”. This makes it hard to search for in the css file.

I started new project based on your previous pen, this would be version #23 of the project.

I really like your handling with the wrapper and inner div

good job on that one

PaulOB · January 20, 2019, 12:17pm

Yes that’s a debate that has gone on for some years now.

I usually like to put the word ‘menu’ next to the hamburger just to confirm its use even though it uses up some screen real estate.

I think the key comments are whether the hamburger is primary or secondary navigation. If it is primary navigation then it needs to be in a clear and prominent position so that users are not distracted by other items in the menu. If it is secondary navigation and main navigational links are always available then you can crowd it into the corner a little.

The three dots type of menu (usually means more) is only useful to be people who know what it means. Many users will never click on them simply not knowing what they are for. The article you mention sites Facebook navigational methods but I find them mostly unusable and not very intuitive.

The problem with navigation for smaller devices is that you are always stuck between a rock and a hard place and you have to think carefully about your architecture and how your visitors can find things easily. Too many developers think a nice design is the most important thing but in reality it is the usability of the site that is most important with a nice design second-place. That’s not to say you can’t have both

frederikwalle · January 22, 2019, 8:13pm

Hi I wonder If you have time for another look

I think I finally have the images responsive:

I needed to make the element slider__text position: absolute in order to make this happen.It looked like you did the same in your sample from post #10 …

What would I need to do to align this , rest of the sites uses this element for margins :

<div class="inner">

.inner {
  max-width: 1170px;
  margin: auto;
}

But this does not seam to work on absolute positioned elements? ???

Edit added these changes and got the desired results

.slider__text {
 display: inline-block;
 margin: 0 auto;
 margin-bottom: 50px;    
 max-width: 1170px;       
 position: absolute;
 top: 10px;
 left: 0px;
 right: 0px;
 z-index: 1000;
 width:100%;

}

But text is not 100% responsive any suggestions on edits ?

PaulOB · January 22, 2019, 8:49pm

You need to specify the left and right positions to create a space into which it can be centred. Absolute elements are content width and therefore there would be nothing to centre unless you create the left and right boundaries…

Do This:

/* ---- text container ---- */
.slider__text {
  height: 100%;
  position: absolute;
  max-width: 1170px;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}

You would just need to add a few placed media queries and reduce the text size so that it fits better. You can create viewport based typography but is usually more trouble than its worth because you probably want to change other things along the way.

frederikwalle · January 22, 2019, 8:52pm

Thanks for your tips and suggestions … Also as a side question what do you feel about BEM- class naming is it something you use ?

PaulOB · January 22, 2019, 9:00pm

No I don’t use it but I see how it could be useful when working in a team.

However, when I see even BEM experts arguing about how the code should look then I think the usefulness is lost. Often it seems to me that these things like pre-processors, BEM, frameworks and the myriad of other methods are techniques written by programmers who just can’t get the hang of CSS, They don’t like the cascade as it doesn’t fit neatly into their box.

In the end it all boils down to consistency, simplicity and common sense.

frederikwalle · January 22, 2019, 9:26pm

thanks for your input mentor Good to get expert opinions first hand from a CSS-pro like you . I try to read a few posts/articles everyday and its a little hard for me to judge which one to ignore and which to follow… The BEM-naming sounded smart but looks a little crazy