What is the best way to do that?
If full screen then show "FULL SCREEN MEMBERSHIP"
If mobile or tablet size then show "Please use Full Screen" and hide textA
Thanks !!!
#media only screen and (min-width: 301px) {
html,body{
height: 100vh;
width: 100%;
background: #356aa0;
}
.fullScreen{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
background: #fff;
width: 400px;
border-radius: 12px;
text-align: center;
}
p {
display:none
}
#media only screen and (max-width: 300px) {
body {
background-color: red;
}
p {
display:block
}
}
<div class="fullScreen">
FULL SCREEN MEMBERSHIP
</div>
<p id="mobile">Please use Full Screen</p>
Try this:
html,
body {
height: 100vh;
width: 100%;
background: #356aa0;
}
.fullScreen {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 400px;
border-radius: 12px;
text-align: center;
}
p {
display: none
}
#media only screen and (max-width: 300px) {
p {
display: block !important;
}
.fullScreen{
display:none;
}
}
<div class="fullScreen">
FULL SCREEN MEMBERSHIP
</div>
<p id="mobile">Please use Full Screen</p>
Related
in this code, the font size increases in proportion to the screen ratio
/*
#mixin fontSuperSize($number){
#media (min-aspect-ratio: 2/1) {
font-size: $number * 2vh;
}
#media (max-aspect-ratio: 2/1) {
font-size: $number * 1vw;
}
}*/
#media (min-aspect-ratio: 2 / 1) {
div {
font-size: 8vh; } }
#media (max-aspect-ratio: 2 / 1) {
div {
font-size: 4vw; } }
<div>1234567890987654321</div>
The length of the child elements is more than 100 vmin in total, and therefore the adjustment comes. I need to reduce the scale of the child elements so that the adjustment does not occur on the square screens.
How can I do the same as for text but for a div. That is what I have now...
How can I make it so that the div does not work out
<div class="main">
<div class="auth"></div>
<div class="table" ></div>
<div class="news" ></div>
</div>
<style>
.main {
width: 100vw;
height: 100vh;
}
.auth {
width: 60vmin;
height: 60vmin;
background: blue;
position: absolute;
left: 2%;
right : 2%;
}
.table {
width: 60vmin;
height: 20vmin;
background: green;
position: absolute;
right: 2%;
top: 2%;
}
.news {
width: 70vmin;
height: 20vmin;
background: gold;
position: absolute;
right: 2.5%;
bottom: 2.5%;
}
</style>
I'd like to use #conA as a hero section and have #conA's height to fill the entire viewport (so #conA height:100vh). It's working correctly on tablet, but on laptop, it looks like #conA's height takes up much more than viewport.
Son on tablet it looks correctly:
enter image description here
But on laptop, it looks like:
enter image description here
(note that I tried putting a blue border to #conA, and it's way taller than viewport)
What I'd like it to look like instead is this:
enter image description here
Is there a way to fix this?
<section id="conA">
<div class="container">
<div id="heroText">
<div id="text-fixed">lorem ipsum</div>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>
#conA {
height: 100vh;
}
#conA .container {
margin-left: auto;
margin-right: auto;
display: block;
}
#heroText {
color: #56525E;
}
#conA #text {
display: inline;
}
#media (min-width: 600px) and (max-width: 959px) {
#conA .container {
width: 70%;
}
#conA {
min-height: 800px;
position: relative;
}
#heroText {
line-height: 1.7;
font-size: 28px;
text-align: center;
position: absolute;
width: 70%;
top: 20%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#conA #images {
text-align: center;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
width: 90%;
}
#conA #images img{
width: 13em;
height: auto;
}
}
It feels like there is more to it than you have provided. However, my observations are as such
You have #media queries defined for tablet view, so your height:100vh is not affecting it on tablets.
Instead of defining height:100vh try using max-height: 100vh. It would limit your #conA to 100vh only.
Make sure you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> added inside your tag.
Finally, it very much depends on type of screen. The Pixel DPI (density per inch) for your Tablet may be something very different from your system. Read more about Pixel density here: https://material.io/design/layout/pixel-density.html
do you really need a #media?
here is your simplified code with flexBox.
is the rendering as expected?
#conA {
height: 100vh;
border:blue 5px solid;
}
#conA .container {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#heroText {
background: red;
line-height: 1.7;
font-size: 28px;
text-align: center;
width: 70%;
margin-top:20vh;
}
#conA #images {
background: yellow;
text-align: center;
margin-top: 1em;
width: 100%;
}
#conA #images img{
width: 13em;
height: auto;
}
I am trying to create a page with a slot machine and I have some issues when I am trying to make it responsive. At some point it gets cut off when going to smaller devices. Also I think that I made it a bit complicated , I hope you guys understand my mess of a code. thanks a lot
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.background {
background: url("bg.jpg");
height: 500px;
padding: 270px 0;
height: 100%;
background-repeat: no-repeat;
width: 100%;
}
.all-parts {
margin: auto;
height: 300px;
width: 50%;
position: relative;
}
.slot-machine {
background: url("slot-machine.png");
background-repeat: no-repeat;
height: 500px;
width: 100%;
position: absolute;
}
.free-spins {
background: url("freespins-banner.png");
background-repeat: no-repeat;
height: 100px;
position: absolute;
top: 150px;
left: 370px;
z-index: 3;
width: 60%;
}
.click-to-spin {
background: url("diagonal-strip.png");
background-repeat: no-repeat;
position: absolute;
z-index: 3;
top: 450px;
width: 100%;
height: 130px;
background-size: cover;
}
.click-to-spin p {
text-align: center;
margin-top: 70px;
font-size: 40px;
color: rgb(247, 241, 198);
}
.first-slot img {
margin-top: -1180px;
margin-left: 215px;
width: 120px;
}
.second-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
.third-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
first-slot,
.second-slot,
.third-slot {
float: left;
}
.slot-machine-wrapper {
overflow: hidden;
height: 150px;
margin-top: 60px;
}
#media only screen and (max-width: 1400px) {
body {
background-color: red;
}
.all-parts {
width: 100%;
display: table;
}
.slot-machine {
width: 100%;
}
}
<div class="background">
<div class="all-parts">
<div class="slot-machine">
<div class="slot-machine-wrapper">
<div class="first-slot">
<img src="slot-strip.png">
</div>
<div class="second-slot">
<img src="slot-strip.png">
</div>
<div class="third-slot">
<img src="slot-strip.png">
</div>
</div>
</div>
<div class="free-spins">
</div>
</div>
<div class="click-to-spin">
<p>Click to spin!</p>
</div>
</div>
i will suggest you use css #media queries to break points, for example
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:200px;
width:70%;
position: absolute;
}
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:250px;
width:80%;
position: absolute;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
just place the css value that will likely change accross devices in each #media queries above, also remember to have this in your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to create a responsive design and using the position absolute to place my image in the right position. Now, is there a way to "lock down" two images to resize together with the size of the screen? I have to keep adjusting the image position using the #media query.
It's driving me insane now. What I want to achieve is both images to move together at the same time.
Have a look at this Fiddle or see the demo below:
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
left: 0;
top: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
max-width: 1200px;
}
.container {
display: inline-block;
max-width: 900px;
}
.absolutecontainerliquids {
height: 450px;
}
.basecloudcontainer {
position: relative;
}
.paddingtop {
padding-top: 30px;
}
.liquids {
position: absolute;
left: 10%;
z-index: 10;
width: 80%;
}
.cloud {
position: absolute;
left: 0%;
width: 100%;
z-index: 1;
}
.darkgrey {
background-color: #262626;
}
.lightgrey {
background-color: #cfcdc7;
}
.page1 {
z-index: 10;
}
.page2 {
padding-top: 40px;
}
.firstimagetabletlogostripes {
display: none;
}
.firstimagelogobottom {
display: none;
}
.firstimagelogo {
width: 64%;
left: 18%;
top: 27%;
position: absolute;
z-index: 1;
}
.blacktext {
color: black;
}
.paragraph {
text-align: center;
padding: 0 30px;
}
#media screen and (min-width: 340px) {
.firstimagelogo {
width: 65%;
top: 25%;
}
}
#media screen and (min-width: 500px) {
.firstimagelogo {
width: 30%;
top: 30%;
left: 35%;
z-index: 10;
}
.firstimagemlogostripes {
visibility: hidden;
}
.firstimagetabletlogostripes {
display: block;
position: absolute;
left: -35%;
top: 0%;
z-index: 2;
width: 120%;
}
}
#media screen and (min-width: 600px) {
.firstimagetabletlogostripes {
top: -10%;
left: -40%
}
}
#media screen and (min-width: 700px) {
.wrapper {
overflow: visible;
}
.absolutecontainerliquids {
height: 650px;
}
.firstimagetabletlogostripes {
top: -20%;
left: -45%;
width: 130%;
}
}
#media screen and (min-width: 800px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 900px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 1000px) {
.firstimagetabletlogostripes {
top: -60%;
left: -30%;
width: 120%;
}
.firstimagelogo {
width: 20%;
top: 25%;
left: 40%;
z-index: 10;
}
.firstimagelogotop {
display: block;
position: absolute;
top: -0%;
left: 70%;
width: 40%;
}
.firstimagelogobottom {
display: block;
position: absolute;
top: 70%;
left: 15%;
width: 40%;
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Base - E-Liquid</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper darkgrey page1">
<div class="container">
<img class="firstimagemlogostripes" src="https://image.ibb.co/g5WJ66/mlogostripes.png" />
<img class="firstimagetabletlogostripes" src="https://preview.ibb.co/gFnrR6/stripes.png" />
<img class="firstimagelogo" src="https://image.ibb.co/gsPGtm/logofilled.png" />
<img class="firstimagelogobottom" src="https://preview.ibb.co/gkXEeR/imagelogobottom.png" />
</div>
</div>
<div class="wrapper lightgrey page2">
<div class="container absolutecontainerliquids">
<div class="paragraph blacktext">
<p>Ecstatic advanced and procured civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely
houses her met. Met any nor may through resolve entered. An mr cause tried oh do shade happy.
</p>
</div>
</div>
</body>
</html>
This is the HTML:
<div class="bck">
<div class="image-1"></div>
</div>
And CSS:
.bck {
background-image="image url"
}
.image-1 {
margin-top: 40px
margin-left: 40px
}
You can use div tag and put your both image in it. If you are using external css then create a class and apply that class to both of images.
Update:
This is Html file:
<div class="bck">
<div class="image-1"></div>
</div>
And css:
.bck{
background-image="image url"}
.image-1{
margin-top: 40px
margin-left: 40px}
So I'm having a problem where some buttons in a seperate div are binding to a header I've absolute positioned the logo's and the intro section is a separate div.
Heres the html including buttons that aren't working
<div class="header">
<div class="logo-right">
<img src="/img/project-logo.png" alt="Hedonist Project" />
<img src="/img/drinks-logo.png" alt="Hedonist Drinks" />
</div>
<div class="logo">
<img src="/img/logo.png" alt="Hedonist Events" />
<h4>a creative drinks consultancy</h4>
</div>
</div>
<div class="intro">
<div class="container">
<div class="intro__text editable"><h3>Hedonist Events are an events agency
for bar staff, bar management, events production and pop-up bars.</h3>
<div class="intro__buttons">
<a class="btn" href="#contact">get in touch</a>
<a class="btn" target="_blank" rel="noopener" href="deck.html">see the event deck</a>
</div>
Heres the css
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
right: 0;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
#media (max-width: 1000px) {
height: 10em;
}
}
When using absolute in this case the header as to be relative:. Also using absolute position and you want to align a tag left just use "left" no need for "right" unless you want it to fill the whole space of the relative container. Update your code with the below
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
position: relavtive;
#media (max-width: 1000px) {
height: 10em;
}
}