Develop Reference

How to make the file upload button on center

Cleck my site
https://webpconverterio.blogspot.com/
How to make the file upload button on center in mobile view
Check this image

Are you trying to achieve this with Javascript? This may be tagged wrong, looking at your website I was able to center the form by adding one simple line to the CSS styles:
[type=file] {
margin: 20px 0;
margin-left: 200px; /* this is causing you to add 200px of margin on the left /*
}
You can either remove that from the styles if you don't need it, or target mobile devices with the following css:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
[type=file] {
margin: 20px 0;
margin-left: 0;
}
}
Note, I haven't tested that css so you may need to modify it a bit. You can take a look here for adding media queries to your css styles to target different devices: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

input[type=file] {
margin: 20px 0;
margin-left: 200px;
}
the problem is here, you should make it responsive or use flex display (flex make it very easy).
however you can now add this to your css and make it right.
#media only screen and (max-width: 600px) {
input[type=file] {
margin: 20px 0;
margin-left: 20px;
}
}

How to make images position properly on lower resolutions without bootstrap?

I am trying to make website which has some icons on map. The problem is, that when I am making window smaller icons have wrong position, and they are in different places than I would like them to be. Also I cannot use bootstrap to position them. Only HTML, CSS and JS/jQuery.
Option 1: https://imgur.com/a/ifKFXRL
Option 2: https://imgur.com/a/R5DmQbt
I have already tried thing like:
min-height:100%;
min-width:100%;
}
#media only screen and (max-width: 1000px) {
body .background .foodini-logo img{
width:15%;
height:15%;
margin-top: 10%
margin-left:12%;
}
}
It only changed it for a while, because with resolution getting lower I had to add another media like every 100px, which is not an option for every icon I think.
html{
height:100%;
width:100%;
}
body {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: cover;
background-color:rgb(178,212,238);
}
.
.
.
body .background .foodini-logo{
margin-top:15%;
margin-left:17%;
}
body .background .haps-logo {
margin-top: 35%;
margin-left: 23%;
}
I would like to have this icons be all the time as in option 1, no matter what resolution user will have on his screen.

The tricky part is that you're trying to use background-size: cover with position: relative logos. Cover is going to grow and shrink based on how large the elements are inside it. But you don't want that.
.background {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: 100% auto;
background-color: rgb(178,212,238);
padding-bottom: 65%;
}
Changing the background-size to 100% auto will make the background 100% wide without stretching. I also added padding to make sure the container will keep the correct height ratio, since we're going to make the logo position: absolute so they don't conflict with each other.
.logo {
position: absolute;
transform: translate(-50%, -50%);
}
.haps-logo {
top: 35%;
left: 23%;
}
I added transform so the logos are centered on their position, rather than being pinned to the top-left of the logo. A bit easier in my opinion, but not required.
If you post a codepen or jsfiddle link with your code we can make sure it works, but otherwise, you can adapt this to your current setup.

Removing vertical white space between divs, especially after hitting a breakpoint

I'm working on a responsive page design at the moment and I'm running into an issue with white-space between the divs, especially after hitting breakpoints.
body, html {
padding: 0;
margin: 0;
}
.header {
padding-top: 5px;
background-color: red;
width: 100%;
}
.sub-header {
padding: 5px;
margin: 0px;
background-color: yellow;
width: 100%;
}
.main-content {
padding: 5px;
background-color: blue;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
padding: 5px;
background-color: green;
width: 100%;
}
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
}
<div class="header">Header
<div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
I want to have the blue div take up the remaining space in this white space, as well as after the sub-header is removed at the break point.
<div class="footer">footer</div>
Here's a quick mock up of what I'm experiencing: http://jsfiddle.net/gaych7vp/6/
I understand what I have to do in order to make it take up the remainder of the white space before it hits a breakpoint (I'm assuming just tweaking the height values), but how would I go about making the blue div take up the remaining white space that gets created when the yellow div gets hidden after hitting the breakpoint?
I'm still really new to javascript but from other answers I've read it could be done by creation a function that finds the height of the browser and then subtracts it from the other divs. Is that possible and if so, how could I accomplish that?

Use position:absolute with different top values
.main-content {
position:absolute;
top:51px;
bottom:0px;
}
and
#media screen and (max-width: 320px) {
.main-content {
top: 23px;
}
}
fiddle
Another approach is using display:table and display:table-row
body, html{
width:100%;
height: 100%;
}
body{
display:table;
}
.main-content {
width: 100%;
height: 100%;
display:table-row;
}
fiddle
Make a div fill the height of the remaining screen space

You can use calc on the .main-content div to calculate the size, but you would need to set the heights of the header, footer, and subheader divs. Seems to me though you could just give the body a background color of blue, and achieve the same thing?

Change
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
to
#media screen and (max-width: 320px) {
.sub-header {
visibility: hidden;
}
}
I think this is what you meant. Fiddle.

There's no need for a JavaScript solution here.
The white area is caused because you are using position: absolute to force the footer to the bottom of the window, regardless of the content.
This isn't the normal way to achieve this, you'll run into issues later on when you do add content to your main-content div. You'll find that the footer will be positioned over this content (this will also happen if you shrink the window vertically).
I think what you'd like to do, is give the main-content div a min-height:, this way, the page won't collapse and look terrible if there is little content, but it will stretch naturally when more content is added.
You can also and remove the position: absolute from the footer div.
Here is a demonstration:
http://jsfiddle.net/t46aopas/
** UPDATE **
If you'd like a dynamic solution, I've created a heavily annotated JavaScript example here: http://jsfiddle.net/nahgdkaw/
(I included lots of comments since you said you were new to JavaScript ;) )
That should hopefully help you along the way a little.
Be aware that if the content inside the .main-content div is larger than the .main-content div area, the div will NOT expand to accommodate it.
You can however use the code provided and add in an if statement to, before resizing the .main-content div, check if the .main-content content
is larger than the available area (you may need to add a wrapper div around the .main-content content). If so, then resize the .main-content div to match the .main-content content height (otherwise, perform the resize as it currently is).
(Also, I strongly advise against using HTML tables for anything other than tabular data)

I edited my original answer but don't have the reputation points necessary to add a comment to notify you. I'll remove this answer after you've seen my updated answer above.

Resizing images using media queries

Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.
I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.
Here is old jsfiddle with the issue.
Here is updated fiddle, with my max height + width fix
Also you can check out this link which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.
UPDATE: Okay I have fixed the issue at desktop width by using max-width: 390px; and max-height: 390px; on my .portfolio img class. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.

I resolved this issue by changing my portfolio img css to:
.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
And used media queries to limit the width and height on the image at each viewport:
#media (max-width:767px) {
.portfolio img {
max-width: 100%;
max-height: 100%;
}
}
#media (min-width:768px) {
.portfolio img {
max-width: 240px;
max-height: 240px;
}
}
#media (min-width:992px) {
.portfolio img {
max-width: 314px;
max-height: 314px;
}
}
#media (min-width:1200px) {
.portfolio img {
max-width: 380px;
max-height: 380px;
}
}
http://jsfiddle.net/uv634/2/

How to make point where divs stop shrinking with browser size

There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.
An example of this would be http://en.wikipedia.org/wiki/Main_Page
The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.
I would like to do this effect with a JSFiddle I am working on:
http://jsfiddle.net/MrLister/JwGuR/10/
If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.
Here is the CSS for the Fiddle:
.figure {
position: relative;
display:inline-block;
max-width: 33%;
}
.figure .figcaption {
text-align: center;
height:0;
top: 40%;
width: 100%;
font-size: 55px;
color: white;
position: absolute;
z-index: 1;
}
.figure img {
display: block;
max-width: 100%;
}

Simply add a min-width size to the things you want to stop shrinking :)
Like so:
.figure {
position: relative;
display: inline-block;
max-width: 33%;
min-width: 150px;
}
Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/

min-width:500px;
would cause the window to have a minimum width of 500px.
http://jsfiddle.net/JwGuR/14/ after you reach 500px the images stop resizing.

Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.
http://css-tricks.com/css-media-queries/
img{
width:100%;
}
#media all and (max-width: 699px) {
img{
width:500px;
}
}
This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice