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;
}
}

White space below carousel when resizing image

I've come across an issue i cannot seem to solve. Im using uncode theme- wordpress. If you see the link in desktop, the images of the carousel are waaay bigger than it needs to be. On mobile it is ok. i want it to fit the available size of screen, or at least kind of match it.
I have tried css and js, but if i change the height of the carousel image, there is a HUGE white space below it. there are no options available for this inside WP, so im assuming css/js is needed.
I added this custom css to make it visible for you the error. If the white spacing is removed, i can make the JS code easily so the images fit the screen:
.post-content .vc_row.limit-width.row-container {
max-width: 100%;
}
.post-content .row-parent {
padding: 0 !important;
}
#gallery-206225 .owl-dots{bottom:-22px!important;}
.owl-carousel .owl-item img {
width: auto!important;
height: 500px!important;
display: block;
margin: 0 auto;
}
#media(max-width:768px){
.owl-carousel .owl-item img {
width: 90%!important;
height: auto!important;
max-height:900px;
}}
any thoughts?
Link Here

You can set a max-height to the image and have that apply only to desktop screens above 1100px.
Like so:
#media (min-width: 1100px) {
.owl-carousel .owl-item img {
max-height: 400px;
}}

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.

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/

Webpage displays incorrectly on different resolutions due to incorrect css

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.

Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)

I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here

Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.

http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}

As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/