I am trying to get for instance a logo have a static position on the screen, let say about 40px from the top and centered horizontally. When I try this, it works. However the positioning varies per screen-size. How can I make this static for all screens?
my code:
<html>
<head>
<style type="text/css">
body{
background-image: url("images/bg.jpg");
background-color: #844903;
}
.logo{
position: fixed;
top: 40px;
right: 850px;
}
h1{
position: fixed;
top: 250px;
right: 720px;
color: #a86b00;
}
.rf_id{
position: fixed;
top: 50%;
right: 50%;
}
</style>
<title></title>
</head>
<body>
<h1>Welcome, Please scan your studentcard:</h1>
<div class="logo"><img src="images/logo.jpg" alt="logo" </div>
<button class="rf_id" type="submit" style="border: 0; background: transparent"><img src="images/rf_id.jpg" alt="submit"/></button>
</body>
</html>
You could try what's know as 'media query'
This is part of CSS which can set different css to your html according to the screen size.
Example 1:
#media (max-width: 600px) {
.logo{
position: fixed;
top: 40px;
right: 850px;
}
}
This means that if the screen size is less than 600px .logo will have the set property.
Example 2:
#media all {
.logo{
position: fixed;
top: 40px;
right: 850px;
}
}
This will set .logo to the set property on all screen sizes.
You can use combination of these media query to get the desired effect.
Read more about this at:
https://css-tricks.com/css-media-queries/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
It's tricky use pixel to position some elements because in mobile screens there are different density (1x, 2x, 1.5x, ...), so one 1 pixel is not really 1px in a screen with density 2x.
I recommend you use em to layout or if you can, use new css3 sizes: vh and vw.
Related
In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?
.alarm img {
position: fixed;
width: 4.5%;
left: 41.7%;
top: 71%;
}
.faceplate img {
position: fixed;
width: 17%;
left: 40%;
top: 40%;
margin-left: 0px;
margin-top: 0px;
}
<html>
<body style="width:100vw; height:100vh; margin:0;padding:0">
<div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">
<div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>
</div_logo>
</body>
</html>
You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.
In this fact, you have to go to media queries.
For more details, you can follow the link
https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp
In media, query defines your CSS style for different screen sizes.
I hope this is what you are expecting.
.faceplate {
top:25%; /* just change this */
left:25%; /* just change this */
position: absolute;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
position: relative;
padding: 0;
}
.faceplate {
top: 25%;
left: 25%;
position: absolute;
}
.faceplate > img {
width: 90%;
height:90%;
}
.faceplate .alarm {
position: absolute;
top: 0;
}
.faceplate .alarm > img {
width: 70%;
height: 70%;
}
<html>
<body>
<div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">
<div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>
</div>
</body>
</html>
In the first image you can see the logo is positioned correctly but when I change resolution:
But when you try it on different resolutions it gets out of the box:
I just want that when I resize the browser or try in a different resolution, the logo will stay inside the box.
<div class="images">
<a href="https://www.csgolive.com/affiliates">
<img src="images/CSGOLive.png" alt="" width="165px" height="63px" style="display: inline-block;no-repeat center fixed; max-height 3.52%: ; max-width: 8.6%; position: absolute; right: 70.5%; bottom: 77%; min-height: 63px; min-width: 165px; height: auto; width: auto;">
</a>
To apply different styles when the resolution is above or below a certain threshold, you need to use #media queries in your css.
You can either include a conditional document like this:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Or add specific styles in the same document like this:
<style>
#media (max-width: 700px) {
.gun_icon {
margin-bottom: 100px;
}
}
</style>
This should get you where you need to go:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
if you use position: absolute, you must add position:relative; to your parent container.
You are positioning it absolute which takes the image out of the layout flow.
I'd suggest positioning it absolute to it´s relative parent with px coordinates to avoid percentage/flexible units alterations.
Resizable Fiddle
You have several CSS syntax errors on your inline styles, try to move them to external stylesheet.
Like this:
.images {
/* these 2 just for demo */
border: 1px solid red;
height: 110px;
/* new */
position: relative;
}
img {
display: inline-block;
background: no-repeat center fixed;
position: absolute;
/* new */
left: 20px;
top: 20px;
min-height: 63px;
min-width: 165px;
height: 63px;
width: 165px;
}
Clean up your HTML, like this (assuming later on you'd close .images with a </div> tag):
<div class="images">
<a href="https://www.csgolive.com/affiliates">
<img src="https://placehold.it/200x200" alt="">
</a>
Sizes (red border & .images height is set just for reference):
I have been attempting to make some SVG data charts responsive but seem to be unable to do so with the current CSS 'position:fixed' applied to the elements.
I'm looking for, if possible, a solution that doesn't rely on media queries as I have multiple elements that I would need to apply this to. If this isn't possible, then any suggestions on what to do in order to keep all the data matched up with the SVG as the browser is resized, would be great!
Ideally I would like the SVG to scale up and down in size, whilst remaining central, no matter what size the browser is.
This is one of the SVGs that i'm looking to make responsive (right hand side)
http://datahealthcheck.databarracks.com/2016/#backup-section-3
I've created a codepen and added just one percentage on the SVG as an example of the problem http://codepen.io/anon/pen/YGvXkq
<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>
#Backup-3 {
position: fixed;
width: 550px;
margin-left: 73px;
margin-top: 31px;
}
.backup3-percentage {
position: fixed;
color: #000;
margin-left: 478px;
margin-top: 96px;
font-size: 1em;
transform: rotate(6deg);
}
I'd go with viewport units
.responsive-div {
position: fixed;
width: 70vw; // vw being viewport-width, so 70% of the width of the viewport
height: 50vh; // vh being viewport-height, so 50% of the height of the viewport
}
This article is going more in-depth about it
body{ margin:0; padding:0;
}
.mydiv {
max-width:1800px;
width:100%;
position:fixed; background:red; height:100px; border:5px solid green; box-sizing: border-box;}
<div class="mydiv">
</div>
I think media queries would be the best approach for make the div responsive.
If not you can use with:100% and max-width to your position fixed div
max-width dont work with position: fixed. This my alternative:
`.nav{
width: 1280px;
position: fixed;
}
#media all and (max-width: 1280px) {
.nav{
width: 100%;
}
}`
if you used width without #media 100% your block
header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #1f1f1f;
height: 10%;
}
html body .container-fluid.body-content {
position: absolute;
top: 10%;
bottom: 12%;
right: 0;
left: 0;
overflow-y: auto;
background-color: #171717;
padding-top: 5vh;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #1f1f1f;
height: 12%;
}
<header>
Some stuff
</header>
<div class="container-fluid body-content">
Some more stuff
</div>
<footer class="col-md-visible-block">
Some more other stuff
</footer>
I'm using bootstrap and I'm working with a page that should have a 10% header always visible on top, containter in which the actual content is located and can be scrolled through and a footer which should be visible ONLY on XS and SM screens, so I added the <footer **class="col-md-visible-block"**>, but when the footer disappears the container-fluid still has a 12% bottom margin, how do I fix this? Again - I want the footer to be visible only on XS and SM devices, but then the container should have no bottom margin.
Can someone help me with this?
I'm not completely sure, what you want to do but if you want something to be visible only on xs and sm devices use .hidden-sm-up.
What col-md-visible-block does? It's not a standard bootstrap class. Does it hide elements using display: none or just visibility: hidden;?
In all modern browser you can use also calc() CSS function in combination with vh and vw units. See http://caniuse.com/#feat=viewport-units
From what I understand of the question you could always use media queries to remove the bottom margin on a particular view port.
Try and adapt this code for purpose:
//For smaller than md screens
#media screen and (max-width: 991px) {
#foo {
display: none;
}
}
//For larger than sm screens
#media screen and (min-width: 991px) {
#foo {
margin: X;
}
}
Hope this helps slightly!
I'm creating a basic contact page for my website. I'm struggling to get it looking good in varying resolutions.
My laptop is 1368x766 and my monitor is 1920x1080.
The elements that set to absolute are moving around, the top image isn't moving...all other elements are moving... I'm so confused:
CSS:
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-bottom: 0px;
}
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}
p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}
p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}
.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right:1050px;
}
.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px;
right: 620px;
}
.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right: 196px;
}
.Divider
{
position: absolute;
z-index: 1;
top: 380px;
right: 28px;
padding-bottom: 20px
}
html { -webkit-font-smoothing: antialiased; }
HTML:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<title>Benjamin Edwards | Web Designer | West Sussex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
<meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<p2>Connect on LinkedIN:</p2>
<div class="LI">
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</div>
<p3>Download my CV:</p3>
<div class="CV">
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</div>
<p4>Send me an email:</p4>
<div class="mail">
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</div>
<div class="Divider">
<img src="http://i.imgur.com/B4TiKRT.png">
</div>
</body>
JSFiddle
As exmaple how simple it can be for you, i created a jsfiddle:
JSFiddle
HTML
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<ul>
<li><h1>Connect on LinkedIN:</h1>
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</li>
<li><h1>Download my CV:</h1>
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</li>
<li><h1>Send me an email:</h1>
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</li>
</ul>
CSS
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
min-width: 900px;
}
img {
margin: auto 20px;
}
ul {
height: 275px;
width: 80%;
margin: 10% auto;
border: 3px solid #31C2A9;
min-width: 900px;
}
ul li {
float: left;
width: 33%;
border-right: 1px solid #31C2A9;
list-style-type: none;
height: 275px;
min-width: 275px;
}
ul li:last-child {
border-right: none;
}
You get rid of all the css selectors and simplify your code :-)
And there is no single position absolute ;-)
Its always wise to make a fiddle about the problem you are having.
Coming to the issue about elements moving around, Its because you have absolutely placed ALL the elements and hard coded the values. Like:
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
Since at different browser sizes, the resolution changes and so does the placement of the divs, your elements are moving awry ( Since you have absolutely positioned them only to ONE browser dimension.
So what you should do:
First, you should make sure you understand when should a div be absolute and when should it be relative.
I'll give a thumb rule: If you want to position an element with respect to a div. Make it position absolute and its parent, position: relative.
You could make your website responsive using Bootstrap. But you could also give measurements in % and prevent distortions.
If I am to do one:
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
If you dont exactly know whats happening, you should spend time studying %, em measurements etc.
If you can create a fiddle and show your code, We can help you fix it.
You can use CSS media queries for this.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
With media queries, we'll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}