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!
Related
I have created a div, and give it an initial size, css as below, I want it can responsive in different devices.
.main {
font-size: 14px;
line-height: 1.4;
font-family: museo_sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
width: 30em;
height: 40em;
background-color: tomato;
border: solid 1px black;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
demo result
What I want is make it responsive, when view in different device.
Similar as a component in Airtasker website, in the browser, it has its initial size (width and heigth) enter image description here
but when viewed on different device, or just zoom out browser, it will auto-scale to fit the screen
enter image description here
I know the solution may be very simple, but I just don't understand how to do it.
You can achieve it in many ways, and two most common would probably be:
setting its width to some percentage value (like 80%) and some fixed max-width value. This way it will take 80% of the screen on smaller devices, but won't be bigger than the fixed value you specified on bigger screens;
.modal {
display: block;
width: 80%;
max-width: 50rem;
height: 30rem;
background-color: lightgray;
margin: 0 auto;
}
<div class="container">
<div class="modal"></div>
</div>
using media-queries, where you will have exact control over how elements behave under certain conditions (screen size most commonly).
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.
So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%.
edit: Here is a fiddle mockup of my code. https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
and the css
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
#media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows.
Add viewport meta tag in the head section for the media queries to work on mobile.
http://getbootstrap.com/css/#overview-mobile
The styles in the following code are working fine on large devices (Desktops and tablets). But on mobile devices most of the divs are overlapping because of the margin-top values.
I know this is not a propery way of designing website responsively.
Could you please give me a solution?
#welcome {
background: yellow;
background-size: 100% 100%;
width: 100%;
height: 600px;
}
#inquiry {
margin-top: 600px;
width: 100%;
height: 500px;
background: red);
}
#products {
margin-top: 1100px; /*(margin-top of inquiry + height of inquiry) */
width: 100%;
height: 500px;
background: green;
}
#footer {
margin-top: 1600px; /* (margin-top of products + height of products) */
width: 100%;
height: 500px;
background: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
Welcome Message
</div>
<div id="Inquiry">
Inquiry Form
</div>
<div id="products">
Products
</div>
<div id="footer">
footer
</div>
Although it is better to use Mediaqueries, You can also use:
margin-top: 10vh;
height: 20vh;
this will place the div 10% of the screen height down, and will give it a height that is 20% of the screen size. The problem is that it is CSS3 so old browsers won't support it. (I think everything below android 4.0 won't support it. you have to test this though) The amount of people using outdated browser is getting less and less.
You can use margin-top: % instead of pixels.
Or just use #media queries to control your margin on different screens.
For example: #media (max-width: 991px) { #products{ margin-top: 100px; } }
Try with:
position: absolute;
margin-top: 150px;
margin-left: 100px;
//inside of a box you can use padding-top......
You can either use percentages for width and height properties (a width of 80% will allways be 80% of the current size of the browser window, and thus your element will scale responsively when the window is resized).
However, I'd strongly recomend you learn to use media queries instead.
Lets say you have a left navigation menu of class left-nav, that you'd like to occupy 20% of the page width, but to be hidden at page widths of 800px and less.
.left-nav{width:20%}
#media screen and (max-width 800;){
.left-nav{display:none}
}
It should hopefully be really easy for you to figure out how media queries work from this example - you specify a maximum and/or minimum page width or height at which to apply given rules. Should be fairly straight forward to make your page layout behave properly using these.
Based on your comments, normal static/relative div elements are by default as wide as the screen and will stack themselves vertically after each other.
By setting position: relative on them, you can move them from that normal flow and if you set position: absolute you take them out from that normal flow and place them on an exact position/size using left, top, width and height properties.
Here is a sample showing that:
#welcome {
background: yellow;
height: 600px;
position: relative;
left: 50px;
}
#inquiry {
height: 500px;
background: #f99;
}
#products {
height: 500px;
background: #9f9;
}
#footer {
height: 500px;
background: #99f;
}
#extra {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background: #f9f;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
Welcome Message, positioned relative, moved out of flow 50px to the left
</div>
<div id="inquiry">
Inquiry Form
</div>
<div id="products">
Products
</div>
<div id="footer">
footer
</div>
<div id="extra">
extra, positioned absolute
</div>
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;
}
}