I have this Background img that I would like to put a contact form inside the computer screen as in the image bellow,
Is there a way to get the form to always stick at this position no matter what screen size (and without adding numerous #media queries..)?
You have to use the % unit in the css, so it will always going to be proportionally to the screen.
Ex:
form {
width: 100%;
}
.form_input-short {
width: 80%;
}
.form_input-big {
width: 80%;
}
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
I'm writing an app with Angular 8 and NativeScript 6.4.1.
I want to create a perfectly square button. I'm not able to hard-code the height and width.
e.g. height: 20px width: 20px is not good for me because my app will run on different devices with different screen sizes.
I have tried these suggestions:
https://spin.atomicobject.com/2015/07/14/css-responsive-square/
https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao
It doesn't seem to work for me.
Here is my playground:
https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=3
How can I make perfectly square buttons?
code snippet:
.sqaure-button {
height: 40%;
width: 40%;
}
.sqaure-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
<Button class="sqaure-button" backgroundColor="pink"></Button>
This image is the desired result in terms of the square sizes and the device size:
.square-button {
width: 40%;
height: 40%;
}
This actually should work by chance, I think the probability of something like this to give a square is very low that it works only when the parent is a square. You're saying take 40% of the height of the parent, say it's 1000px and take 40% of the width of the parent say it's 2000px, Now you see why it isn't a square?
We need to take a better reference than the width/height of the parent as those won't be the same, Dynamically using js or whatever, set the width/height to 50% of the parent's height. It should give a square, Now edit it to suit your needs, Perhaps set one (width or height) from the parent and set the other as the one you've already set.
I tried this again with nothing else in my view layer; just the button.
I got a perfectly square button using 'dp' units.
.button-square {
height: 90dp;
width: 90dp;
}
<ActionBar title="Home">
</ActionBar>
<Button class="button-square" backgroundColor="pink"></Button>
Here is my playground: https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=6
I tried it with percentages and it doesn't work:
.button-square {
height: 40%;
width: 40%;
}
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
Basically a calculator app. Terminal / text field up top. 4x4 grid of buttons below it. Everything should scale to fill any screen. I know this is extraordinarily open ended. You can be general in your answers. Use a table? Divs? What kind of display? Fixed? I don't know how to best approach it.
Don't use tables.
You want to look into responsive web design.
http://www.alistapart.com/articles/responsive-web-design/
I'd use a grid system. Check into a few to see what suits what you are doing. You want your grid to be flexible, so percentage based, rather than pixel based. That way you won't have to rely on media query break points to change the widths - it will just flex with the viewport width.
eg (
.onecol { width: 5.801104972%; }
.twocol { width: 14.364640883%; }
.threecol { width: 22.928176794%; }
.fourcol { width: 31.491712705%; }
.fivecol { width: 40.055248616%; }
.sixcol { width: 48.618784527%; }
.sevencol { width: 57.182320438000005%; }
.eightcol { width: 65.74585634900001%; }
.ninecol { width: 74.30939226%; }
.tencol { width: 82.87292817100001%; }
.elevencol { width: 91.436464082%; }
.twelvecol { width: 99.999999993%; }
/* layout & column defaults */
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
position: relative;
float: left;
margin-left: 2.762430939%;
}
.first {
margin-left: 0;
}
.last {
float: right;
}
So your input would be in a twelvecol and then move have buttons into a threecol grid
That said, you will find that for portrait mode on phones and down, you might need to change the layout, so use media queries and alter the css to maybe only show two buttons per row from there.
There's no best solution, the simplest is to use tables, the most modern to use display: grid but won't work on all browsers, you could also try putting whatever you write in a fixed width and height element and using css3's transform: scale to "fit screen", but that also doesn't work in all browsers, you could also do it using 4 inline-block with height: 100%; width: 25%; elements inside 4 block elements with height: 25%, or using 16 inline-block elements with width: 25%; height: 25%, another solution is could define all 16 elements with position: fixed or position: absolute and width:25%; height:25% and define the top and left for each individually. I think for all the mentioned solutions you should also not forget to set html, body { margin: 0; padding: 0; height: 100%; }.
Of course you might want to adjust those percentages if you add margins, but set those also in percentages so they look good when you scale.
I will prefer to work with divs but for this kind of grid maybe a table will be easier way, but for sure use precents as a values for width and height, you maybe use colspan and rowspan to fit your table cells in the right way
If you keep your buttons fixed at 4x4, go with a responsive design.
Don't use tables, use Divs.
Don't use a fixed display, or an absolute display. (I guess you could, but why?)
Finally, the answer you're looking for: Responsive Design
I came across the website http://www.swiftkey.net.
On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.
How do they acheive this effect?
Using firebug, I was able to decipher what I think MIGHT be doing this:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.
I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:
The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
The grey bars are created by having a background color on the <body> or <html> elements:
body {
background-color: #888;
}
I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.
This has to accomplished with javascript screen object
var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;
availWidth and availHeight gives actual available width and height, considering taskbars and scrollbars etc.
width and height give the actual screen resolution. Then access the variables and decide the type of layout.
However adjusting anything to center is easy
div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}
the javascript screen width tracing is for more control options