Develop Reference

Problem With #Media rules. Trying to Display Well in Mobile

I'm trying to get a site to display well in mobile as well as desktop but there is one part of the site that doesn't render well it's good in desktop but when I switch to mobile:
Mobile
Desktop
I've been playing around with different media queries to no avail. Adjusting the scale does nothing Here is the code. Thanks in advance to any who help.
const date = new Date();
var minutesNow= date.getMinutes();
var remainder = minutesNow%15;
var minutesLeft = 15-remainder;
var secondsNow = date.getSeconds();
let time = (86400 -(3600*24 - 60*minutesLeft + secondsNow));
var clock = $('.clock').FlipClock(time, {
countdown: true
});
#clock1 {
display: inline-block;
width: auto;
}
.container {
text-align: center;
}
#media only screen and (max-width: 600px) {
#clock1 {
transform: scale(0.8)
}
}
<br>
<link href="https://api.chipware.co.za/css/flipclock.css"rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api.chipware.co.za/js/flipclock-min.js"></script>
<div class="container">
<div class="clock" id="clock1"></div>
</div>

Assuming you are doing Desktop first approach:
Use 'flex' box instead of 'inline-block' on the parent
.container{
display: flex;
flex-wrap: wrap
justify-content: middle;
aligh-items: center;
flex-direction: row;
}
And for using media query just, change the direction to vertical:
.container{
flex-direction: column;
}
If on mobile you want one part of the clock per line, just adjust the margin of the child element on smaller screens to make each part use width of the screen.
Also, try and use, width on each child element and 'flex-grow' property to get a better understanding.
https://www.w3schools.com/cssref/css3_pr_flex-grow.asp

Adjust page function, when changing device, just reloading works

I have a function to determine the height of the page, so that the page always stays at the maximum size regardless of the device, without scrolling.
I first take the maximum height of let s = $ (document) .height and then the height of all other elements, such as the header, main footer and footer. I subtract the value of all items by the variable s, which contains the height total. I assign the result to the main height value, so the page is the way I want it.
However, when I change the device to chrome inspection feature, or I leave it in landscape, the page is irregular. So be sure to reload, try using windows.resize by calling a function, but it doesn't adjust, just reloads. I don't know what to do.
I call the function like this:
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};

Any reason you couldn't use css to accomplish this? height: 100vh will keep an element at the viewport height even when resized, and using flex or grid you could stretch and scale the main layout elements however you need them.
body {
margin: 0;
text-align: center;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
background: aliceblue;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
background: lightblue;
}
<section class="container">
<header><h1>header</h1></header>
<div class="content">content</div>
<footer>Footer</footer>
</section>

Resizing images with object-fit:contain in flexbox only works in Firefox

I'm trying to build a photo mosaic using flexbox and object-fit: contain by changing the line height (and thus adjusting width keeping the aspect ratio).
This works well in Firefox, however not in Chrome, iExplorer, Edge, where the images shrink in place. While the images are adjusted in size, the spacing is increased.
I made an example in JSFiddle with the following Code where
container is a line of images
image1/2 are the images in a container
img contains the actual picture
HTML
<div id=container class=lContainer>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
</div>
CSS
.lContainer {
display: flex;
justify-content: center;
width: auto;
}
.imageThumb {
height: 100%;
padding: 2px;
}
img {
object-fit: contain;
height: 100%;
width: auto;
min-width: auto;
}
JS (resizing the pictures to show the effect)
$(document).ready(function() {
var divID = document.getElementById('\container')
var el = $(divID);
curHeight = 200
goalHeight = 150;
el.height(curHeight).animate({
height: goalHeight
}, 600, function() {
el.css('height', goalHeight);
$(el).css("opacity", 0.99);
console.log("done")
});
});
I noticed that toggling padding on the image in Chrome yields the intended result (e.g. the page is not loaded correctly, if I toggle padding off / on in the inspector, the result changes to the intended one).
Using an online autoprefixer to account for the other browsers does not change a thing.
What am I missing? Thanks for your help!

Navigation transition

I am new to jQuery and am teaching myself as I go but am struggling to figure out how to indicate that on up scroll the white navigation background moves up to show the white navigation text on panel 1?
bartaile.com is what I am using as inspiration & the changes I'm making to bartaile's navigation are---> after the user scrolls past the first panel the navigation hides, only when the user scrolls up does the navigation show again, when panel 1 comes back down the white navigation backgrouns slide up to hide and shows white text.
Any help or tips to learn how to do this would be greatly appreciated! :-)
var lastScrollTop = 0;
$(window).on('scroll', function() {
var header = $('.header');
var stage0 = $('.stage-0');
var scrollTop = $(window).scrollTop();
if (scrollTop > lastScrollTop) {
// down scroll
if (scrollTop > stage0.offset().top + stage0.height()) {
header.addClass('hide');
}
} else {
// up scroll
if (scrollTop <= stage0.offset().top + stage0.height()) {
header.removeClass('headerBGchange headerLIchange');
} else {
header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
}
}
lastScrollTop = scrollTop;
});
.header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 80px;
-webkit-transition: top .5s ease;
transition: top .5s ease;
position: fixed;
width: 100%;
top: 0;
background-color: transparent;
overflow: hidden;
}
.header ul {
margin: 20px;
padding: 0;
}
.header ul li {
display: inline-block;
margin-right: 20px;
color: white;
}
.header ul li:last-child {
margin-right: 0;
}
.hide {
top: -80px;
}
.headerBGchange {
Background: white;
}
.BGupTranistion {
}
.header.headerLIchange ul li {
color: Blue;
}
.header.headerLIchange {
border-bottom: 1px solid black;
}'
</style>
<!--stage style--><style>
.stage {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background-color: white;
border-bottom: 1px solid black;
font-size: 48px;
height: 200px;
width: 100%;
}
.stage-0 {
background: grey;
}
.stage-24 {
background: #433937;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>

You will need to add another container to achieve the effect you're looking for. What you essentially want to have is a container at the top and another container which will fade in and out depending on your scroll behaviour. So how do you achieve that? Create a -Element on top of the page, like your gray box is there at the moment. When scrolling down, do not transform it, instead, fade in another previously hidden container to act as your navigation when not at the top of the page. Now if you scroll back up, check the scroll location, and if the two locations of both containers overlap, start fading out the container you use when not at the top of the page. I do not think there is another solution. I might try and write a codepen on it now, I will edit my post if I had success. You could also try working it out with another div inside the actual header and z-index, though that might turn out really bad.
I have done my best to achieve what you want. Here is the CodePen.
I used two different divs, one called .dynamic-header and one normal header, and I've added a function to detect jQuery In-Viewport.
$.fn.isOnScreen = function(){
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
I hope this fits your needs. Also, I changed some CSS around, using the Top-Property for the transition. You can outsource all of that into CSS classes and use them instead, but I thought this was the simplest solution for demonstration purposes. Is this what you want?
Edit 1: You named bartaile.com as an example. I took a look at the effect they create and recreated it. What you have to do is basically create a structure like this:
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li>YOUR HEADER</li>
</ul>
</div>
I made another CodePen for this.
The header-bg has a height of 0. The header-content has a height of, lets say, 80px, and a background-color of transparent. Now do NOT check which direction is scrolled. The only important aspect for the effect is, how far are you from the top / is a specific element in viewport? I went for 400px from top. Now when that requirement is met, just fade in the header-bg. It will be inbetween the wrapper and the content, and will provide a background. Together with that, you may also change the color of the header-content, but I did not do that. It is what bartaile.com does, tho, so you might want to include it. Enjoy!
Edit 2: I've edited the CodePen according to your comment. See it in action here. This does the following: A header is there. When scrolling down, it'll disappear. On scroll up, it'll bring up a background, but when scrolling so that scrollTop < 400, the background will fade out. As of what I understood, this is what you want. It uses the structure I posted above.

I check out "bartaile.com" and I have to point out that what they use is a third party lib called 'fullpage'.If you wanna achieve that kind of effect, you should check out this lib fullpage.js. This is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.
This plugin can handle "full screen scrolling" and also normal scrolling. You can achieve your effect with this much more easier

Resizing Images As Window is Resized?

Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}

http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width

Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.

The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/

Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)