This is what it looks like on pc. This is what it looks like on mobile. I want the buttons on mobile to be smaller (auto-adjusted to the screen size).
This is the HTML and CSS for the page:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
right: 0;
top: 0;
}
.container .btn {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btt {
position: absolute;
top: 45%;
left: 24%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btc {
position: absolute;
top: 45%;
left: 76%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: white;
color: black;
}
.container .btt:hover {
background-color: white;
color: black;
}
.container .btc:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="some img" alt="" class="alignnone size-full wp-image-1660" />
ER DU ARRANGØR?</button>
ER DU MARKEDSFØRER?</button>
KONTAKT OSS!</button></div>
</body>
</html>
I'm assuming, if this is possible, that the solution would be to change the .container .btx for the buttons. I can't find a way to do this.
You should definitely look into media queries.
They allow you to work on different screens defined by various parameters (width, height, orientation).
#media (max-width: 800px) {
//your code goes here
}
I think this is what you're looking for.
Also take a look at viewport width and height units (vh and vw) that allow you to resize elements according to the size of the window.
div{
height: 50vh;//50% of the viewport (window) height
width: 40vw;//40% of the viewport (window) width
}
As answered in the above comment, you should definitely check out #media query and vh and vw. I'll also recommend you to take a look at calc().
I tweaked your code a bit with vh, vw, calc() with some minor modifications and this is what I came up with. Adjust the values in width and calc() to suit your need. Yeah, I don't use #media here.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
right: 0;
top: 0;
}
button {
position: absolute;
top: 45%;
width: 23vw;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: calc(0.5rem + 1vw);
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn {
left: 50%;
}
.container .btt {
left: 24%;
}
.container .btc {
left: 76%;
}
.container .btn:hover {
background-color: white;
color: black;
}
.container .btt:hover {
background-color: white;
color: black;
}
.container .btc:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="some img" alt="" class="alignnone size-full wp-image-1660" />
<button class="btn">ER DU ARRANGØR?</button>
<button class="btt">ER DU MARKEDSFØRER?</button>
<button class="btc">KONTAKT OSS!</button></div>
</body>
</html>
I found of my old css codes for responsive.
Yes you should use media, something like:
#media (max-width: 991px) {
.quotesBox {
font-size: 19px;
}
.ftrLinks li a {
padding: 0px 15px;
}
.socialLinks li {
padding: 0px 10px;
}
.socialLinks li a img {
width: 37px;
height: 37px;
}
}
I hope it can help you, just change for your needs
Related
i got a problem with my code. Everytime i move my page the text is on a completly other position and overlows the most of the time. i am pretty new to coding and i really dont know how to fix it at all.
This is my HTMl data.
html,
body {
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.filter {
backdrop-filter: blur(2px);
height: 100%;
width: 100%;
z-index: 1;
}
.container {
display: flex;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 40%;
height: 20%;
padding: 20px;
text-align: center;
}
.item {
border: solid 0px;
position: relative;
left: 34%;
top: 0%;
padding: 2%;
text-align: center;
color: white;
z-index: 2;
font-size: 90%;
}
#text {
position: relative;
left: 0%;
padding: 1%;
top: 30%;
z-index: 2;
color: white;
text-align: center;
font-size: 180%;
}
#media only screen and (max-width:70%) {
.container {
width: 100%;
}
}
<head>
<meta charset="UTF-8" />
<meta hrrp-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./test-txt.css">
<title>Tomorrow x Together</title>
</head>
<body>
<div class="filter"></div>
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</video>
</body>
i really dont know how to fix it. i also tried to just dont use a flexbox. but i think my Knowledges for that arent good enough xD
i also tried to vary between flex-directions, flex-wraps between different width, heights. to work with and without a div.
I did everything for me possible.
I see it is a mix of position, z-index, flex, percentages, etc. It is difficult to find out what the question is. It seems you want to center a box but I'm not sure. If this is the case, try this as starting point.
But again, to help you out please give some extra info about the required layout.
* {
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.view {
display: flex;
width: 100%;
min-height: 100%;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.center-container {
width: 40%;
height: 20%;
margin: auto; /* center in middle */
background-color: rgba(0, 0, 0, 0.4);
}
.container {
display: flex;
padding-bottom: 10px;
border: 3px solid #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
/* transform: translate(-50%, -50%); */
}
#media only screen and (max-width: 600px) {
.center-container {
width: 100%;
}
}
.item {
width: 33.333%;
padding: 2%;
/* z-index: 2; */
color: white;
font-size: 90%;
}
#text {
padding: 1%;
/* z-index: 2; */
color: white;
text-align: center;
font-size: 180%;
}
<body>
<div class="view">
<div class="center-container">
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</div>
</body>
I am having some issues with this DIV not getting centered.
I am sure it is something with CSS,
I need some corrections to CSS below and to get rid of unnecessary CSS statements if not needed
I would like the div to be centered and 75% wide
Thanks,
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
margin: auto;
margin-left: auto;
margin-right: auto;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 95%;
height: 90%;
overflow: auto;
align-self: center;
}
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>SMT Explorer</title>
<link rel="stylesheet" href="explorer.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="main_div" style="position: relative; "></div>
<div id="popup_factory" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseFPopup()">×</a>
</div>
<div id="popup_stations" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseSPopup()">×</a>
</div>
<script type="text/javascript" src="explorer.js"></script>
</body>
</html>
If it's a popup, it should propbably have position: fixed, not absolute. And then, these settings should work:
.css_main_popup {
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 90%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
overflow: auto;
transition: opacity 10ms;
}
So the important settings for centering (horizontally AND vertically) are position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); (no margin, no align-self)
That would result in something like this (visibility excepted):
.css_main_popup {
transition: opacity 10ms;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 75%;
height: 90%;
overflow: auto;
background: red;
}
<div class="css_main_popup"></div>
Just using left and position: absolute you are able to push the div to the center of the screen.
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
font-weight: bold;
text-decoration: none;
color: #333;
border: 1px solid black;
width: 75%;
left: 15%;
font-size: 30px;
padding: 10px;
background: #fff;
border-radius: 5px;
height: 90%;
overflow: auto;
}
I have a quite simple website. It scans for pictures via php and then displays them one at a time with two buttons on top. The bottons are used to switch back and forth between them.
On the very top of the page there are a couple of links, but I can not click them. When I double klick them, the picture gets highlighted instead of the text my cursor is above. I have tried it without js and php and the issue is still there.
I am not very experienced in HTML. I think it might be something about the z-index, but I cannot fix it.
body {
background-color: #FFFFFFf
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
I hope you can help me out here. I could manage to work out all the js and php things involved, but languages that don't follow programming rules... Not my best part.
The reason you have the box over the links is the floats aren't being cleared. That means the box that contains the links collapses, which is probably why you need to add so much padding. If you add clear: both to the container you will be able to click the links.
If you want to keep everything else the same I suggest adding a wrapper around the menu and setting position: relative, then you can give that a z-index greater than the container.
The menu buttons which are both position: absolute then need higher z-index too.
.menu {
position: relative;
z-index: 2;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
z-index: 1;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menu">
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.
Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.
Both of these have been fixed in the following:
body {
background-color: #ffffff;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #ffffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
float: left;
width: 100%;
margin-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
May I please know how can I align the login button to the center of the page? I can't seem to do it althoughI've tried many suggestions from previous posts like this.
Need help on this.
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: 50%;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
You've given your button a position of absolute, so you're looking to also apply left: 50%. However, you probably actually also want to subtract the offset from your width, so that the element remains perfectly in the center. In this case, you're looking for left: 45%, as the element has a width of 10%. The same goes for top, which can be calculated with calc(50% - (48px / 2)):
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: calc(50% - (48px / 2));
left: 45%; /*calc(50% - (10% / 2)); */
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
Hope this helps :)
Is this what you want?
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This put the button at the center of the html.
body {
background: white;
margin: 0;
font-family: Arial;
}
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</body>
Add this:
button {
left : 50%;
}
.wrapper{
display: flex;
justify-content: center;}
<div class="wrapper">
<button> Sample </button>
</div>
.wrapper{
display: flex;
justify-content: center;
}
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>
I have a button and a link aligned to column with flexbox. I want to change just the link and button to fit onto one row at max-width: 800px; I have searched for and found no answer that fits exactly what I need. Hope someone can help and it is probably an easy fix but I can't seem to figure it out.
Here is my CSS & HTML:
.landing {
position: relative;
}
#pic {
display: flex;
}
#pic figcaption {
position: absolute;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 7vw;
z-index: 1;
top: 30%;
left: 50%;
transform: translateX(-50%);
color: #ffff66;
}
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
flex-direction: row;
}
}
/*****Signup button*****/
.home-signup {
position: absolute;
font-size: 2.5vw;
border: 2px solid #ffff66;
border-radius: 10px;
color: #ffff66;
padding: 0.5em 2.5em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
cursor: pointer;
}
/****login button****/
.home-login {
position: absolute;
font-size: 1.8em;
color: #ffff66;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
<section class="landing">
<figure id="pic">
<img srcset="images/detail/landingBig.jpg 1920w,
images/detail/landingMedium.jpg 960w,
images/detail/landingSmall.jpg 480w" sizes="100vw" src="images/detail/landingMedium.jpg" alt="Top Banner with pic of two speakers on a wooden floor">
<figcaption>Collabo</figcaption>
</figure>
<div class="buttonWrapper">
<button class="home-signup">Signup</button>
<a class="home-login" href="#">Login</a>
</div>
</section>
I would do a reset on a few rules and write or load mediaqueries last:
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
.landing {
position: relative;
}
#pic {
display: flex;
}
#pic figcaption {
position: absolute;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 7vw;
z-index: 1;
top: 30%;
left: 50%;
transform: translateX(-50%);
color: #ffff66;
}
/*****Signup button*****/
.home-signup {
position: absolute;
font-size: 2.5vw;
border: 2px solid #ffff66;
border-radius: 10px;
color: #ffff66;
padding: 0.5em 2.5em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
cursor: pointer;
}
/****login button****/
.home-login {
position: absolute;
font-size: 1.8em;
color: #ffff66;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
<section class="landing">
<figure id="pic">
<img src="http://lorempixel.com/800/600" alt="Top Banner with pic of two speakers on a wooden floor">
<figcaption>Collabo</figcaption>
</figure>
<div class="buttonWrapper">
<button class="home-signup">Signup</button>
<a class="home-login" href="#">Login</a>
</div>
</section>