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;
}
}
Related
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;
}}
My Bootstrap datepicker currently displays at the bottom left of the textbox, thats ok in a normal browser window. But the issue comes when the browser window is made small or resized. I want to make the datepicker display top left when the browser window is made small . Also on small screen I want the datepicker to become small also , but it should be readable and should also look good
Any help would be greatly appreciated
You want to use CSS media queries for different resolutions. eg.
#media (min-width: 768px) {
.some-class {
float: right;
width: some_width;
height: auto;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.some-class {
float: left;
width: some_smaller_width;
height: auto (or some specific height);
}
}
more: w3schools/mediaqueries
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.
Can't seem to source why the image in this full-width slider, when the browser window is fully expanded, gets overlapped slightly by the menu above it.
It looks perfect in mobile, tablet, it's desktop that is posing the problem. Here's a link, open and close the window and you'll see what I mean:
[linked removed]
thanks!
Aha! Found it!
Ok so when your window is small enough to "qualify" as a mobile device, you have one very important property set on your header:
position: static;
This means that the header is in the flow of the document. When you change to desktop size, that gets changed to
position: fixed;
This takes the top header out of the flow of the document, sliding the other content up into its place.
So, to fix this, you can do something like this:
#media screen and (min-width: 700px) /*<--your min desktop width here*/
{
body
{
margin-top: 40px; /*header height here*/
}
}
Was doing some detective work, two things happened, one, I added a fix for a Chrome bug earlier on in the header:
body:after {
display: initial;
position: absolute;
top: 0;
visibility: hidden;
}
And second, needed to compensate for it with padding:
.iosSlider .slider .item img {
width: 100%;
height: auto;
float: left;
padding-top: 15px;
}
Domino effect.
use below code in navigation div css file
position: relative;
z-index: 100;
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