I'm developing a mobile HTML web page. One of the first tags on the HTML is:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
When I examine this page on Chrome developer tools it looks just right, as I'm using mostly relative dimensions, however on the mobile device itself it looks like the UI is as twice larger then the emulation.
This is a simplified version of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="./js/jquery.js"></script>
<script src="./js/utils.js"></script>
<title>Manager View</title>
</head>
<body>
<header>
<div id="burger"><img src="img/burger.png"></div>
<div id="title">Page Title</div>
<div id="logo"><img src="img/logo.jpg"></div>
</header>
<div id="main">
<table>
<tr>
<td><img src="img/icon1.png"></td>
<td><img src="img/icon2.png"></td>
</tr>
<tr>
<td><img src="img/icon3.png"></td>
<td><img src="img/icon4.png"></td>
</tr>
</table>
</div>
</body>
</html>
That's my CSS:
body{
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
}
header {
background-color: #3465A9;
height: 7vh;
min-height: 100px;
display: flex;
flex-direction: row-reverse;
width: 100%;
color: white;
font-family: Arial;
font-size: 50pt;
min-width: 800px;
padding-bottom: 10px;
}
header #title{
line-height: 7vh;
padding-right: 50px;
}
header #burger{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 100px;
position: relative;
}
header #burger img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
header #logo{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 200px;
position: absolute;
left: 0px;
}
header #logo img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#main{
background: url("../img/bg.jpg");
}
#main table{
width: 80%;
table-layout:fixed;
min-width: 800px;
margin: auto;
margin-top: 20%;
}
table td{
width: 50%;
}
td img{
transform: translate(-10%, 0%);
}
Is there any way to see the actual size on Chrome Dev Tools? And how can I make sure it displays on the right size on the mobile device?
Thanks
Related
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
I am very new at web development and am trying to figure out an issue I am having with my header. I want my header to be responsive and not cause an over-lap on the button elements next to it.
I have tried applying the position, float, and transform elements separately and all at once to the header sections and this does not seem to solve the issue or I just do not know how to properly use them.
Below is a sample of both my html and css.
HTML:
<header>
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS Classes:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
Any solution for this would be greatly appreciated. Thanks
Basically, if you want to make a fully responsive page/navbar, you may need to use the "Burger Menu". Looks like you have used Bootstrap. You can see this link
Still, I'm trying to provide a measurable solution. Check the code and style as you want. I just have used a flex div at the html portion.
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
Let me know if it works for you.
I am new to CSS and I want to put text "MOUNTAINS" behind the mountain in the background image. Like the below image.
Home section image
This is the existing code
#home{
height: 100%;
position: relative;
padding: 0;
}
#home-img{
background: url("../img/home/1.jpg");
background-size: cover;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
#home-content{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 1px;
line-height: 124px;
color: #4d4d4d;
font-family: 'Bebas Neue', cursive;
}
#home-content #first-title{
color: rgb(77, 77, 77);
}
#home-content #second-title{
color: rgb(65, 79, 107);
}
#home-content h1{
font-size: 115px;
margin-left: -25%;
margin-top: -8%;
}
<section id="home" class="col-md-12">
<!-- Background Image -->
<div id="home-img" class="col-md-12">
</div>
<!-- Home Content -->
<div id="home-content">
<h1 id="first-title">LOSANGELES</h1>
<h1 id="second-title">MOUNTAINS</h1>
</div>
</section>
I am stuck with this. So can CSS expert help me to do this? Thank you
Hi please have a look to the snippet.
**z-index** and **position** are important key factors for this case
<!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>Document</title>
</head>
<body style="background-image: url(https://images.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);">
<div style="background-image: url(https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Grass-Grounds-Coverings-PNG-Clipart/Green_Grass_PNG_Clip_Art_Image.png?m=1532246688);
background-repeat: no-repeat; height: 100vh; width: 100%; background-size: contain;
background-position: bottom; z-index: 8; position: relative;">
</div>
<h1 style="z-index: 0; position: absolute; font-size: 40vh; transform: translate(-50%, -50%); left: 50%; top: 25%; text-align: center;">Hello<br>Mountain </h1>
</body>
</html>
Here is a code. Try this and replace the files here with yours:
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 35%; /* Adjust this value to move the positioned div up and down */
font-family: Arial,sans-serif;
color: #000; /*Set your own colour*/
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
</head>
<body>
<div class="box">
<img src="https://www.tutorialrepublic.com/examples/images/kites.jpg" alt="Flying Kites">
<div class="text">
<h1>Flying Kites</h1>
</div>
</div>
</body>
</html>
I hope it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
For example in the html page above
Starting view
When scrolling to the right
I thought setting the div1 width to auto would match the div2 width but it does not work. Am I missing something? Do I need to auto update the width with javascript or can it be done with CSS only?
I want it cover the entire page even if the page gets resized.
Set position: relative on #div2, #div1 will then expand with it:
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: relative;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
<div id="div1">
<div id="div2"></div>
</div>
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).