I have a problem with my css file. The styles are not being applied for iPhone, instead I get the iPad queries applied for both iPhone and iPad. I have checked and checked for typos and cannot find any. Here is my css file for both iPad and iPhone queries:
css
/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 768px) and (max-width: 1024px) {
body,
html {
position: fixed;}
#menu {display: none;}
#presentacion {
padding: 0;
position: fixed;
display: inline-block;
text-align: center;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttons {
opacity: 1;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#info {
font-size: 2em;
}
h1 {
line-height: 8vh;
font-size: 2.1em;
}
ul {
margin-right: 2em;
}
#front {
height: 750px;
}
#imagewrap {
top: 10%;
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
#front {
background-color: red;
}
#header {
height: 8vh;
}
.sections {
width: 900px;
height: 500px;
margin: 0 auto;
overflow-y: hidden;
top: 5%;
padding: none;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
}
/*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 375px) and (max-width: 767px) {
#front {
z-index: 6;
margin: 50% auto 0;
height: 85%;}
#container {
position: relative;
height: 100vh;
width: 100vw;
background-color: green;
overflow-y: scroll;
text-align: center;
}
#imagewrap {
margin-top: 400px;
}
#header {
height: 20vh;
background-color: red;
}
.sections {
width: 900px;
height: 650px;
margin: 0 auto;
overflow-y: hidden;
top: 15%;
padding: 50px 50px 50px 50px;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
.buttons {
opacity: 1;
}
#info {
font-size: 2em;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
}
I don't see any clear typos or mistakes that would prevent the code from running. Why would the media query not work? Any help appreciated. Thank you.
Could this be due to not setting a viewport: https://www.w3schools.com/css/css_rwd_viewport.asp At least I don't see any viewport in your code.
Also; I've always learned to have separate stylesheets per screentype; it's easier to maintain and mobile users don't have to pull in the unnecessary IPad css.
To do this I place my mediaqueries inbetween the head tag together with a viewport. Each mediaquery is linked to a separate .css file
Here's an example of an HTML file that uses two styles. I believe you can expand mediaqueries by using 'and' which will allow you to use a specific stylesheet for a screensize between a min and max.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset -->
<link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport -->
</head>
<body>
<p>Responsive text goes here.</p>
</body>
</html>
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>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I am having an issue with my homepage - I do not have enough content for a fullpage and I am trying to set the position of this section above the footer at the bottom.
I had success with using positon: fixed; and bottom: 50px; to sit above my footer, however when I was opening the navigation on an ipad, the navigation would disappear behind the section.
I'm not sure how to tackle the problem, I was attempting to use vertical-align: bottom; but could not get it to work.
My CSS:
section.hero {
max-height: 400px;
text-align: center;
img.hero-responsive {
width: 100%;
height: 100px;
}
h2 {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
top: -90px;
font-weight: 800;
position: relative;
}
h3 {
position: relative;
top: -60px;
font-weight: 800;
}
}
section.info {
background-color: #464646;
height: auto;
position: relative;
top: -50px;
width: 100vw;
padding: 0px;
left: -5px;
text-align: center;
color: white;
padding-bottom: 50px;
.row {
margin: 0px !important;
padding: 0px !important;
.col-lg-3 {
border-top: 2px solid rgba(160, 160, 160, 0.8);
margin-top: 5px !important;
padding: 0px !important;
i {
font-size: 40px;
padding: 10px;
margin: 25px !important;
padding: 0px !important;
}
i.laravel { color: #f05340; }
i.wordpress { color: #21759b; }
i.sass { color: #cd6799; }
img {
width: 50px;
height: 40px;
margin: 10px !important;
padding: 0px !important;
}
h2 {
margin: 0px !important;
padding: 0px !important;
}
p {
width: 95%;
margin: 0px auto 0px auto !important;
padding: 0px 0px 10px 0px !important;
}
}
}
}
#media only screen and (min-width: 768px) {
section.hero {
img.hero-responsive {
width: 450px;
}
h2 {
width: 400px;
top: -80px;
}
}
section.info {
top: auto;
position: absolute;
}
}
#media only screen and (min-width: 1000px) {
section.hero {
h3 {
top: -30px;
}
}
section.info {
min-height: 500px;
position: unset;
margin-left: -5px;
}
}
codepen: https://codepen.io/aparker611/pen/bGbQdqg
codep: https://codepen.io/aparker611/pen/bGbQdqg
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You can try using flexbox. if you share a codepen or a full example it will more easy to help you
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
https://codepen.io/centrodph/pen/gOYQpBL
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
I have a page which is structured into two main divs. One's a header which sits at the top of the page and there is one below it which is a container for the page content. The header can be seen in the code snippet below:
<link href="http://www.spareskills.com/css/compiled/theme.css" rel="stylesheet"/>
<body id="postajob">
<div class="header">
<div class="background-images img1 animated fadeInUpBig"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="animated bounceInLeft">Post a job.</h2>
<p>
Find a job by filling out your application below. It really is easy.
<br>
<span class="hidden-xs">Explain the job you need and people with the right skills will be in touch</span>
</p>
</div>
</div>
</div>
</div>
</body>
The relevant SASS/CSS is listed below:
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%;
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%;
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
You can see by resizing the snippet how the image behaves relative to the header. However this is all from hard coding pixels into the stylesheet as you can see.
My question is: How can I get the image to stick the bottom of the header as in the first snippet (when it is full size) no matter what the resolution or the device?
It doesn't need background images or the grid system. The Bootstrap docs correctly state that is something is always full width, then you don't need the grid system.
DEMO: https://jsbin.com/gomoca/1/
https://jsbin.com/gomoca/1/edit?html,css,output
HTML:
<section class="primary-page-header text-center">
<div class="container">
<h1>Title</h1>
<p>Text Goes Here</p>
<div class="page-header-img center-block">
<img src="http://placekitten.com/g/150" class="img-responsive img-circle" alt="" />
</div>
</div><!-- /.container -->
</section><!-- /.primary-page-header>
CSS:
.primary-page-header {
background: #f7f7f7;
border-bottom: 4px double #aaa;
padding-top: 5%;
}
.primary-page-header p {
padding-bottom: 2%;
}
.primary-page-header h1 {
font-size:24px;
}
.page-header-img img {
border:1px solid #aaa;
padding:3px;
background:#fff;
}
.page-header-img {
width: 50px;
height: 50px;
margin-bottom: -25px;
}
#media (min-width:600px) {
.page-header-img {
width: 100px;
height: 100px;
margin-bottom: -50px;
}
}
#media (min-width:768px) {
.page-header-img {
width: 150px;
height: 150px;
margin-bottom: -75px;
}
.primary-page-header h1 {
font-size:55px;
}
}
Looks like you have set left: 85% for the max size. It should stay on bottom if you set it to 45% just like the other sizes
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%; ----> Change this to 45%
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%; ----> Change this to 45%
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
I haven't tested this across browsers, but here's a solution using background image and a "padding height" trick. The #media queries are used to control which image is displayed at your desired breakpoints, to allow you specify higher-resolution images as the background image gets bigger.
For centering along the container's width, we use the position/transform trick (absolutely position the element, set left:50%, then translate the element -50% of its own width.
header {
padding: 2rem;
text-align: center;
position: relative;
}
header::after {
content: ' ';
border: 1px solid #009;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -2;
}
header::before {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
background-size: 100%;
background-repeat: no-repeat;
width: 10%;
height: 0;
padding-bottom: 10%;
}
#media screen and (max-width: 768px) {
header::before {
background-image: url(http://placehold.it/80x80);
}
}
#media screen and (min-width: 769px) {
header::before {
background-image: url(http://placehold.it/100x100);
}
}
<header>
This is a header with some content.
</header>
So I have the following code for a personal website:
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="jumbotron">
<div id="title-container">
<h1>Name</h1>
<h3>Interactive Resume</h3>
</div>
<div id="jumbotron-overlay"></div>
</div>
<div id="profile"></div>
</body>
</html>
And CSS:
body {
background: url(../img.jpg) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
I'm trying to get my "Name" and "interactive resume" inside the h tags to be on the top layer on top of the overlay, but no matter what I try it seems to be stuck behind the green overlay. I've tried using z-index but to no avail. I'm pretty new to front-end so any help would appreciated.
You need to set your #title-container to be positioned relative and adjust the z-index
#title-container {
width: 100%;
height: 200px;
position:relative; /*Updated here*/
z-index:1; /*Updated here*/
}
Here is a JSFiddle http://jsfiddle.net/2cpnb9ja/1/
z-index only works when position is set.
http://jsfiddle.net/wilchow/z4c7r70t/3/
body {
background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
position:relative;
z-index:1000;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
z-index:500;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}