I can't fit my page to resolution of screen. I have 1920x1080, image is 1920 px width and it is going out of a window. link with code and images: https://mega.nz/file/rPJB2aCZ#OY7vW1yFZ-d0Fb73UvYvw8D-1NEnSmSV5XSA-Dw0LPU index1.html and style1.css are unnecessery.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
<style>
</style>
</head>
<body>
<div class="container1">
<img style="width: 100%" src="../img/Zrzut ekranu 2021-10-18 o 15.21.01.png">
<p class="text1">
<b>Opanuj stres i przejmij kontrolę<br>
w biznesie i życiu prywatnym!</b>
</p>
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań<br>
jeden na jeden i zapanuj nad swoim stresem.</b>
</p>
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
normal image responsive
here a online exercise, if you want to learn how to make an image responsive: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive
.container1 img {
max-width: 100%;
height: auto;
}
if you want an image as a background
use this in your img selector
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
the height is 100vh so 100% of all height of the device, also if the parent his width is less height.
the same with 100vw
object-fit make the image look good on all device, to matter the aspect ratio of the device
position: fixed is for make the image like a background
z-index for making the image go behind everything
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
<!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="style.css">
</head>
<body>
<div class="container1">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<!-- text 1 -->
<p class="text1">
<b>Opanuj stres i przejmij kontrolę
<br>
w biznesie i życiu prywatnym!
</b>
</p>
<!-- text 2 -->
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań
<br>
jeden na jeden i zapanuj nad swoim stresem.
</b>
</p>
<!-- button 1 -->
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<!-- buttton 2 -->
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
Try changing 'width: 100%' to 'width: 100vw' (which means viewport width)
At first you should style your .container1 or body and give it a width of 100% or 100vw. Pixels doesn't work probably because some width of the screen is reserved for scroll. Pozdro
if you use 100vw(view width) instead 100% for your img and set all margin and padding to 0, like that:
* {
margin: 0;
padding: 0;
}
Use this style into your stylesheet to remove the spacing between the image and box-sizing "body {padding:0;margin:0;} "
Related
I am trying to center a div on my website and it now works but when the window is too small you can't scroll all of the ways to the top of the div. Ideally, if the page's content is larger than the window it si viewed in, it should have a scroll bar that allows scrolling all the way to the top of the aqua box.
I belive that this has to do with the styling in either the body or test classes
the webpage is viewable here:
https://htmltest.duelcraft.pages.dev/
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="body">
<div class="test">
<h1>DuelCraft</h1>
<a href="shop.html">
<img src="images/shop.png" alt="shop" style="width:100px;height:50px;" class="center">
</a>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p class="copyright"> ©2022 DuelCraft </p>
</div>
</body>
</html>
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.body{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.email-part {
font-weight: bold;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.copyright{
color:white;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
#ICE_Plane, the trick here is since you are using position absolute ( getting out of the flux )
You need to specify a max height to your .body class, like a max-height: 100vh.
You could as well add a overflow-y: auto to make sure it shows the scrollbar when overflowing
Here is the example you provided working:
Let me know if that helped, or if you need more info
So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right
So here is the 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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
<script src="main.js"></script>
</body>
</html>
And here is the css
*{
padding: 0%;
margin: 0%;
box-sizing: inherit;
}
body {
font-size: 15pt;
width: 480px;
height: 500px;
box-sizing: border-box;
}
#kilograms {
position: relative;
top: 70px;
left: 140px;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
top: 100px;
left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
position: relative;
top: 150px;
left: 240px;
border-radius: 4px;
}
Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.
Also, get rid of the top left attributes.
*{
padding: 0;
margin: 0;
box-sizing: inherit;
box-sizing: border-box;
}
body {
font-size: 15pt;
// width: 480px;
// height: 500px;
}
#kilograms {
position: relative;
// top: 70px;
// left: 140p;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
// top: 100px;
// left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
width: min-content;
position: relative;
// top: 150px;
// left: 240px;
border-radius: 4px;
}
.box{
border:2px dotted green;
width: 500px;
height 500px;
}
<div class='box'>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
</div>
The p-element is in relative position with the element that has a class .dinners at right, so applying border on the p-element will make the right hand border look bigger because of the of relative element that already has it's own border that look like it's merging with the one at the Left because of there is no space between the two. Also note that the box-sizing property affects the way properties are applied on elements. Maybe try using box-sizing: border-box.
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 need to do a vertical and horizontal rectangles with coloured border. When they cross on the top left part, there should be a square with a logo inside. I need it to be responsive to the page crop so that the square and rectangles keep their scale.
sketch
<-- language: html -->
<body>
<div class="header">
<div class="logo">
<img class="logo_file" src="exemple_images/logo.jpg">
</div>
</div>
<div class="row">
<div class="leftcolumn">
<div class="xxss_icons">
<img class="icon" src="exemple_images/instagram.png">
<img class="icon" src="exemple_images/facebook.png">
<img class="icon" src="exemple_images/twitter.png">
</div>
</div>
</div>
<div>
</div>
</body>
/* Header */
.header {
border: 1px solid #FCFF76;
display: flex;
font-size: 70px;
text-align: center;
}
.logo {
border-right: 1px solid #FCFF76;
width: 9.5%;
float: left;
}
.row {
display: flex; /* equal height of the children */
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
Just made a quick example. If you can, I would recommend you to use Bootstrap (https://getbootstrap.com/docs/4.5/getting-started/introduction/), it is really easy to install and will help you to style things faster (and always responsive) ;)
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 0px;
border-right: solid yellow 1px;
}
.square {
padding: 0;
margin: 0;
position: absolute;
border: solid yellow 1px;
height: 160px;
width: 160px;
}
.navbar{
overflow: hidden;
background-color: #111;
position: fixed;
top: 0;
width: 100%;
height: 160px;
border-bottom: solid yellow 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sidenav.css" />
<title>Document</title>
</head>
<body>
<div class="navbar">
</div>
<div class="sidenav">
<div class="square"></div>
</div>
</body>
</html>
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.