I am having troubles with elements size with CSS on mobile.
The background image have 853x480 px, that's supposed to fit perfectly I am wrong?
It's really very very simple CSS code, why that is going on?
Desktop Responsive view: https://prnt.sc/j7d1jr
On desktop browsers the page fit perfectly, the elements like background image and inputs displays perfectly.
On mobile all that resize, all smaller
Iphone mobile view: http://prntscr.com/j7d0ej
How to fix that?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Banco BRB</title>
<style>
body {
background-image: url("bg_login.png");
background-color: red;
background-repeat: no-repeat;
width: 820px;
height: 480px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<center><img src='user.png' height="75%" width="40%"></center>
<br><br>
<form>
<center><label><input type="text"></label>
</form>
</body>
Related
i set html background full screen, in pc is working fine, but has problem in android when user input form and show keyboard ,background is auto resizing
HTML :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>x</h1>
<input type="text" placeholder="XXXXXXXXXXXXX"/>
</body>
</html>
CSS :
html, body {
min-height:100%;height:100%;
}
html {
background: url(https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
SCREENSHOT :
https://prnt.sc/wd6mez - Normal
https://prnt.sc/wd6mnq - Problem
The keyboard on Android is reducing the viewport height, and because of background-size: cover; the background image is naturally resizing to fit the reduced area.
guys I am new to front end development and I am trying to learn from building a page.
Here is the demo.
https://codesandbox.io/s/goofy-boyd-xscgd
it looks fine on full-screen but when I narrow the viewport. The picture seems to be getting far away from the text and the gap between them are getting bigger as the picture shows.
The effect I wanted to achieve is that when I narrow the browser the picture would get closer to the text(and there would be overlap between them). When it is viewed on phone, the picture will become the background picture of the screen. like this
Can someone please help me with this?
Set the image element to
position: absolute;
right: 0;
in the CSS file. That should work.
Well, You can do this with CSS media query. Here is a sample, I hope you can tweak around and make it work for you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="main">
<div id="txt">
<h1>Your Text</h1>
</div>
<div id="pic">
<img src="https://via.placeholder.com/500">
</div>
</div>
</body>
</html>
CSS
#main{
width:100%;
}
#txt{
width:50%;
display: inline-block;
}
#pic{
width:48%;
display: inline-block;
}
#media (max-width: 500px) {
#pic{
display: none;
}
#main{
background: url("https://via.placeholder.com/500");
background-size: cover;
}
#txt{
width:100%;
text-align: center;
}
}
Reduce your browser's size to smaller than 500px and refresh, you will see the change. If you want to do this in more dynamic way, you have to use javascript/jquery.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #ffff99;
/*moe*/
}
#map_border {
width: 740px;
height: 500px;
margin: 0 auto;
background: #000000;
}
</style>
<div id="map_border">
</div>
</body>
</html>
I want the black rectangle to be of fixed width and height irrespective of any screen resolution. I have even used auto.
It works for some of the native screen resolutions in my laptop like 1600X900, 1280X720, and 1024X768 but doesn't work for high resolution like 1920X1080 which is also a native resolution and other non-native resolution.
1920X1080 resolution:
1600X900 resolution:
As you can see the rectangle should be smaller for high resolution 1920X1080 when compared to one with 1600X900. I made sure the browser is not zoomed. I checked with IE, Firefox, and Chrome. Same thing. I wonder if its the issue with my graphics display.
I have one background and one centered image in my page. Its HTML + CSS.
It works fine in desktop browsers. But when I open it from an Android Device, I have two problems.
1- Background image dont fit the page.
2- My centered image looks like it has been zoomed in. In Portrait mode it looks ok but when I turn the device to landscape position, it doesnt fit the screen. My screen resolution is 1280x720, my image size is 954x604. It should fit but it doesn't. It simply looks bigger and can't see the top of the image.
Can anyone help?
Here is the test page
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Celline - Selin Sarpkan</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resource/styles.css">
</head>
<body>
<div class="dispencere">
</div>
</body>
</html>
Here is the CSS:
*{ margin:0; padding:0; }
body{
font-size:9px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
overflow: hidden;
background-image:url('../images/paper.jpg');
background-repeat: no-repeat;
background-size:cover;}
.dispencere{
background-image:url('../images/main.png');
width:954px;
height:604px;
position:absolute;
left:50%;
top:50%;
margin:-295px 0 0 -465px;
text-align:center;}
when zooming in and out my page Link of my page in Chrome browser the background is distorted and page looks like this Look of page after zooming in Chrome.
What can be changed in code to fix it for zooming in Chrome browser without distorting background graphic?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background:#d7df29 url('1.jpg') center center no-repeat;
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Thank you very much!
this line says, WE CANT HELP YOU YET...
background:#d7df29 url('1.jpg') center center no-repeat;
I just read you comment, you got an image, so it will be distoring with zoom in / zoom out...it would be better to go for CSS to avoid such distorting...