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;
}
}
Related
So im fairly new to HTML and CSS and coding in general(C# and C++) and ive been working on a website just for fun. I've mostly learned as i've gone along and im proud of what I have so far even though it isnt much. But I have a problem where whenever I open the site on my laptop which has a smaller screen than my PC or whenever I resize the browser the whole page messes up and text is on top of each other and the background image is smaller with white space all around. I've searched a lot and it seems like everyone has a unique fix for it and none have worked for me. Here is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Trendy</title>
<link rel="icon" type="image/png" href="Images/TitleIcon.png" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div class="container">
<h1 class="index-h1">Trendy</h1>
<nav>
<ul>
<li>SIGN UP</li>
<li>LOG IN</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
width: auto;
height: auto;
background: url(Images/BFG.png);
background-position: top;
background-repeat: no-repeat;
display: block;
}
.index-h1 {
color: #fff;
font-family: "Broadway Flat";
font-size: 100px;
position: absolute;
left: 70px;
top: -30px;
}
.container {
width: 80%;
margin: 0 auto;
}
nav {
position: absolute;
left: 60%;
top: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
list-style: none;
display: inline-block;
color: #fff;
font-family: "Broadway Flat";
font-size: 30px;
padding: 10px 50px;
position: relative;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #e02626;
}
nav a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: #e02626;
position: relative;
top: 0;
width: 0%;
transition: all ease-in-out 150ms;
}
nav a:hover::before {
width: 100%;
}
I'm not sure what it is supposed to look like but I think you're just needing to supply some responsive code like this:
#media only screen and (max-width: 800px) {
h1.index-h1 {
max-width: 55%;
overflow: hidden;
}
}
Generally, avoiding absolute positioning as much as possible is a good idea. Instead of using that, you can use a float for your nav, and as space runs out it will push to the next line.
Or you can use the responsive code above to change it to not float on small device sizes, and instead by displayed block.
If you are instant on using the absolute positioning, consider what you're saying in the code. You're putting a left:60% on the nav, which means you know that the 60% area to the left of it will be blank. So maybe the title should be max-width 60% (or a little less for some padding) and made to shrink a bit as the monitor size shrinks.
Overall, I'd say reconsider your decision to absolute position, and a lot of the answers out there will be more universal to you.
You could use media queries to design your site for smaller screens.
For instance, you can define CSS which only applies if the viewport width is smaller than x.
This example sets the font size to 9pt for a viewport less wide than 400px:
#media (max-width: 400px) {
body {
font-size: 9pt;
}
}
After lots of trial and error, I realized the text was fine and it was the background that had the issue of not scaling with the browser, so i managed to fix it by doing this:
body {
background-image: url(Images/BFG.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
when i was learning HTML and CSS too it was hard specially the positioning. what helps me is using media queries with this link. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
try using that. and make sure you start on mobile first. if you're using google chrome check dev tools and on top left toggle device to resize the screen size it will help you. then make sure you media queries are min-width since you started at a mobile screen.
Hello fellow web developers, I am quite new to web development and have been practicing on my own. I'm trying to create a website and am currently using HTML and CSS. I want the following presentation for the homepage of my website:
I have been testing around with wrappers and body wrappers so that when I open the website on one monitor all the elements are displayed in the middle like the picture above, and when I open the website on my other smaller monitor it should be the same and display all the elements with the same layout. The problem is the navigation bar the title and everything changes position once the window size changes.
Here is the code i currently have:
<!DOCTYPE html>
<html>
<title>WUNI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<body>
<!-- !PAGE CONTENT! -->
<div>
<!-- NAV BAR -->
<a id="nav">
Archive
Home
Contact
</a>
<div id="title">
<h1 class="max-width">WUNI</h1>
</div>
<p id="motto" class="max-width">With a wide range of skills, we generate cohesive content that
span from physical posters to interactive 3D web content
</p>
</div>
<!-- BODY BORDER XD -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<!-- Footer -->
<footer id="footer">
<i></i>
</footer>
</body>
</html>
and here is my css:
body {
background-color: red;
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}
/**
* Using max-width
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* end of special */
/* NAV BAR */
#nav{
display: inline-block;
padding-top: 20%;
padding-left: 0%;
}
.item{
color: white;
text-decoration: none;
font-size: 50px;
padding-bottom: 20px;
padding-left: 50px;
font-family: Impact;
}
.item:hover{
background-color: blue;
}
/* END NAV BAR */
#title{
position: absolute;
color: white;
font-size: 150px;
text-align: center;
font-family: Impact;
top: 10%;
left: 30%;
}
#motto{
position: absolute;
color: white;
font-size: 20px;
text-align: center;
font-family: Impact;
top: 70%;
left: 20%;
}
#footer{
position: fixed;
left: -3%;
bottom: 0;
padding-bottom: 8%;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
/* BODY BORDER */
#top, #bottom, #left, #right {
background-color: white;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 30px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }
/* END BODY BORDER */
If anybody could help me out, I would greatly appreciate it! :D
I would recommend using a grid system to achieve this. A grid system solves all the issues you are having currently with your css. One of my personal favorites is bootstrap as it works across browsers, various screen sizes and comes bundled with a bunch of other useful features as well.
As you are new to web development and bootstrap, you can use a visual bootstrap builder such as layitout to get off the ground really quickly.
Also another tip based on your css, you might want to think about making your font sizes responsive too. This answer should be a good starting point
Use Css grid system, with template areas and media queries. In this video is a clear example to achieve what you want https://youtu.be/7kVeCqQCxlk
I have a basic static S.P.A. that I've gotten styled the way I want when developing on a laptop. When I test on a mobile viewport and scroll up or down the images/content resize. I believe that is built into the chrome mobile browser but I'm wondering if there may be a way to disable or to style around this? A few of the sections of content utilize full background images with text overlaid on top. When the user scrolls and the image resizes it pushes the content into the next section vs. having a clean ending point. I know it's possible because I use mobile pages all the time that don't have this issue. I just don't know how to do it.
.landingImage {
width: 100vw;
height: 100vh;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Black_gram.jpg');
background-position: right;
background-size: cover;
margin-left: auto;
margin-right: auto ;
}
.titleContainer {
position: absolute;
width: 85vw;
height: 75vh;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid white;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16vw;
color: white;
text-shadow: 1px 1px black;
}
.titleText {
margin-top: 10px;
margin-left: 10px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="landingImage">
<div class="titleContainer">
<h1 class="titleText">SHIFT<br>WORKS<br>BICYCLE<br>OPERATIONS</h1>
</div>
</div>
One issue I can see is that the landingImage and titleContainer divs have their heights set relative to the viewport width, e.g.
.landingImage {
...
height: 100vh;
...
}
This means that if the viewport is say 400px wide, the .landingImage div will be 400px high, and this may not be enough.
One option is to use #media queries in you CSS and refine the height of these divs based on the viewport width. e.g.
#media screen and (max-width: 480px) {
.landingImage {
height: 200vh;
}
}
Another possibility is that in your existing CSS you add rule so that the div doesn't shrink below a certain minimum, e.g.
.landingImage {
...
min-height: 800px
...
}
You can set any number of #media media statements and refine the settings to match the specifics of your page.
Good luck!
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.
I have a div that use as a PopUp to take pictures with the WebCam,
was perfect on my monitor (1366x768), but, on smaller screens, the div is
horrible
HTML:
<div id="light" class="white_content">
<a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
<canvas id="canvas" width="500"height="375"> </canvas>
<video autoplay id="videoElement"></video>
<input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>
CSS:
.white_content
{
display: none;
position: fixed;
top: 15%;
left: 17.5%;
width: 65%;
height: 62%;
border-style: solid;
border-width: 1px;
border-color: #474747;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 10px;
min-height: 398px;
min-width: 657px;
}
.cam_btn_canvas
{
font-weight: bolder;
left: 46%;
top: 75%;
position: inherit;
}
#videoElement {
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 50%;
top: 139px;
position: inherit;
}
#canvas
{
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 18%;
top: 139px;
position: inherit;
}
#close_id
{
font-size: 15pt;
font-weight: bolder;
position: inherit;
left: 80%;
top: 106px;
}
I wanted to know how to make both my window and the elements inside keep the ratio even with a smaller screen
Thanks for attention!
Not answering your question directly but here are two fixes for your issue.
Media Query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Developers use these when making their site more responsive.
Here is an example of making my container responsive.
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
Bootstrap
Bootstrap is a framework designed for creating mobile first projects on the web. Since I have been using Bootstrap, I have never once looked back. You can easily make your site responsive by using preset classes with their markup and css. It makes it so you will never really have issues like the one you are experiencing now.
Check out Bootstrap or any other Front-End framework. They are great.
you might find my jQuery plugin here useful, it will allow you to target just the popup div and set different layouts for the items within it according to how wide that div is. While you avoid script with media queries, you can only use them to change layout based on the width of the whole screen rather than the width of the container.