is this impossible to do or something? been working all morning to try and position my video to the centre or try and change the size of the video to small so it can fit at least the key parts of the video so the user can see it on their mobile. What is the best solution to this? I've been researching a lot and can't find any help on this and makes me wonder maybe this is too much to ask for in CSS? unless there is another alternative... please let me know! many thanks!
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
line-height: 1.5;
color: #333;
overflow-x: hidden;
background-color: whitesmoke;
}
.para {
font-size: 1.5em;
margin: auto 10px;;
}
.v-header {
height: 99vh;
display: flex;
align-items: center;
color: #fff;
}
#jsc {
/*display: none;*/
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-left: 1rem;
margin: auto;
text-align: center;
}
.container h1 {
font-size: 2.5em;
}
section {
display: flex;
}
.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-width: 100%;
min-height: 100%;
}
#heading {
font-family: 'Coiny', cursive;
color: white;
font-size: 3rem;
display: none;
}
.header-overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.65;
}
.header-content {
z-index: 2;
}
.header-content .jsc {
margin-bottom: 0;
}
.header-content .jsc {
font-size: 1.5rem;
display: block;
padding-bottom: 2rem;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
#jsc {
height: 150px;
width: 150px;
}
.fullscreen-video-wrap {
position: absolute;
top: 50px;
right: 100px;
}
}
<div class="fullscreen-video-wrap">
<video src="seaturtle.mp4" autoplay="true" loop="true" muted="true"></video>
</div>
<div class="header-overlay"></div>
<div class="header-content">
<img id="jsc" src="jscc.png">
<h3 id="heading">Personal Training</h3>
Contact Me
</div>
</header>
Just add this in your "head" tag. This will automatically resize your video according to the device width.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
Related
I created a basic example to illustrate the problem: https://codepen.io/itsechi/pen/wvmQEJb.
HTML:
<body>
<header>
<h1>RANDOM TEXT</h1>
<h1>MORE RANDOM TEXT</h1>
<header>
<main class="contact-main">
<section class="contact-section">
<h2>CONTACT US</h2>
<p>Random text here Random text here Random text here</p>
<p>Random text here Random text here Random text here</p>
</section>
<img src="https://i.imgur.com/g6xj3zE.jpg">
</main>
</body>
CSS:
html {
box-sizing: border-box;
font-size: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: "League Spartan", sans-serif;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #1B191A;
position: relative;
display: flex;
justify-content: center;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
z-index: -1;
opacity: 0.4;
}
.contact-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
}
#media (max-width: 69.375em) {
.contact-section {
margin: 1rem;
margin-top: 2rem;
}
}
#media (max-width: 34.375em) {
.contact-section {
font-size: 0.9rem;
}
}
#media (max-width: 21.875em) {
.contact-section {
font-size: 0.6rem;
margin: 0.4rem;
}
}
.contact-section h2 {
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
}
#media (max-width: 34.375em) {
.contact-section h2 {
font-size: 1.2rem;
}
}
.contact-section button {
font-family: inherit;
padding: 0.5rem 1rem;
margin-top: 1.5rem;
letter-spacing: 0.15em;
color: #CCAB5B;
background: none;
border: 2px solid #CCAB5B;
font-size: 1rem;
cursor: pointer;
}
.contact-section button:hover {
background-color: #CCAB5B;
color: #000;
}
#media (max-width: 34.375em) {
.contact-section button {
font-size: 0.7rem;
}
}
#media (max-width: 21.875em) {
.contact-section button {
font-size: 0.5rem;
padding: 0.3rem 0.8rem;
}
}
img {
border-radius: 50%;
margin-top: 3rem;
border: 3px solid #CCAB5B;
width: 30rem;
}
#media (max-width: 69.375em) {
img {
position: absolute;
top: 80%;
width: 20rem;
}
}
#media (max-width: 34.375em) {
img {
width: 12rem;
}
}
When I resize the page to see how it looks on smaller screens the background image only fills up the height of the viewport of body and the rest of the container is just background color. The issue is best seen if you try to check how the site looks on Nest Hub in devtools. How can I stop this from happening and make the background image either repeat or better, just fill the entire space when the page becomes scrollable? Thanks.
There are plenty of properties you can implement and combine:
background-position
background-attachment
background-repeat
background-size
if you want to repeat an image you should look into background-repeat. Otherwise you should combine those properties:
body {
background: url('https://via.placeholder.com/1920x1080.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* for demo purpose only */
body {
min-height: 500vh;
}
I think I found out what was causing the problem - it was the absolute positioning of the img. I simply changed the display of the main element to be a grid on smaller devices and now the background is working as it should!
#media (max-width: 69.375em) {
.contact-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
grid-row: 1/2;
}
#media (max-width: 69.375em) {
img {
width: 20rem;
grid-column: span 2;
}
}
When I resize image in <body>, it also changes the size of the logo in the <nav> tag.
I don't think this is the best or most efficient way to code the design for my simplistic website (I have attatched a snapshot of the website here)
When I resize the window smaller the image overrides my navigation menu like this.
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>BLONDED</title>
<link rel="stylesheet" href="style.css">
</head>
<nav>
<span class="logo">Blonded</span>
<header>
<ul class="__navlist">
<li>HOME</li>
<li>AUDIO</li>
<li>SHOWCASE</li>
<li>CONTACT</li>
</ul>
</header>
</nav>
<body class="gallery">
<img src="img/bdcmag3.jpg" alt="boysdontcry!">
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "SF Pro Display", sans-serif;
font-size: 18px;
}
nav {
display: flex;
min-height: 15vh;
justify-content: center;
align-items: center;
}
.logo{
font-family: "Blonde";
font-size: 1.8rem;
cursor: pointer;
color: black;
padding-top: 1rem;
padding-bottom: 2rem;
}
header {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
margin-top: 6.5em;
}
.__navlist {
word-spacing: 150px;
}
.__navlist li {
display: inline-block;
overflow: hidden;
padding-bottom: 20px;
}
a {
text-decoration: none;
color: rgb(10, 10, 10);
}
.gallery {
width: 100%;
padding: 20;
}
.gallery img{
box-sizing: border-box;
width: 20%;
}
Change your css code to this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "SF Pro Display", sans-serif;
font-size: 18px;
}
nav {
display: flex;
min-height: 15vh;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.logo {
font-family: "Blonde";
font-size: 1.8rem;
cursor: pointer;
color: black;
padding-top: 1rem;
padding-bottom: 2rem;
width: 100%;
text-align: center;
}
header {
/* display: inline-block; */
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
text-align: center;
/* margin-top: 6.5em; */
}
.__navlist {
word-spacing: 150px;
}
.__navlist li {
display: inline-block;
overflow: hidden;
padding-bottom: 20px;
}
a {
text-decoration: none;
color: rgb(10, 10, 10);
}
.gallery {
width: 100%;
padding: 20;
}
.gallery img {
box-sizing: border-box;
width: 20%;
}
What's good StackOverflow? I've been trying to figure out for the longest while now why Gmail isn't picking up on my HTML Email's Media Query. It looks good with wide screen but Gmail isn't responding to my phone's screen width, so on phone looks weird and buggy.
I've already tried looking through similar questions, and even tried re-writing my CSS to the point to where I re-wrote my CSS several times to see if the media query would pick up even the smallest of change.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width ,initial-scale=1" />
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
margin: 0;
padding: 15px;
}
.center {
text-align: center;
margin: 0 auto;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
.inner-wrapper {
width: 100%;
max-width: 670px;
background: #554348;
margin: 0 auto;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.header-table {
text-align: center;
padding: 10px 0px 0 0;
}
.header-table .header {
width: 100%;
max-width: 610px;
display: inline-block;
background: #fff;
border-top: 2px solid #E5C2C0;
border-radius: 6px 6px 0 0;
padding-bottom: 24px;
}
.header-table img {
width: 75px;
float: left;
border: 2px solid #E5C2C0;
border-radius: 6px 0 0 0;
border-top: none;
}
.slogan {
color: #000;
font-size: 12px;
margin-top: 124px;
color: #7FC29B;
}
.slogan-hr {
width: 25vh;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
}
.outer-table img {
width: 100%;
max-width: 670px;
height: auto;
}
td {
padding: 0;
}
p {
margin: 0;
}
a {
color: #f1f1f1;
text-decoration: none;
}
.main-table {
width: 100%;
max-width: 610px;
margin: 0 auto;
border-radius: 6px;
margin-top: 25px;
margin-bottom: 25px;
background: #fff;
}
.three-column {
width: 100%;
}
.three-column img {
width: 120px;
}
.section {
/* Change display to inline-block on mobile */
width: 100%;
display: inline-flex;
margin-top: 15px;
margin-left: 30px;
}
.section .pic-container {
display: inline-block;
}
.section .desc-container {
margin: auto;
}
.desc-container td {
padding-bottom: 25px;
}
.desc-container .content {
margin-top: 32px;
}
.desc-table p {
margin-top: 5px;
margin-bottom: 10px;
}
.desc-table .h3 {
font-weight: bold;
text-transform: uppercase;
color: #424B54;
}
.desc-table .price {
font-size: 20px;
font-family: 'Libre Baskerville', serif;
color: #7FC29B;
}
.button-container {
margin-right: 90px;
margin-top: 65px;
height: 35px;
}
.btn-holder {
font-size: 25px;
padding: 9px;
border-radius: 25px;
color: #fff;
background: #4C4B63;
text-decoration: none;
}
.outer-table-2 {
width: 100%;
max-width: 670px !important;
background: #fff;
border-top: 3px solid #D4F5F5;
border-bottom: 3px solid #D4F5F5;
}
.call-to-action {
width: 100%;
max-width: 670px;
text-align: center;
}
.cta-text {
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
color: #4C4B63;
}
.cta-button {
margin-top: 30px;
margin-bottom: 30px;
}
.outer-table-3 {
margin-top: 30px;
width: 100%;
max-width: 670px;
background: #4C4B63;
border-top: 2px solid #7FC29B;
border-radius: 6px 6px 0 0;
}
.footer-table {
width: 100%;
margin-top: 32px;
}
.footer-header-table {
width: 100%;
}
.footer-header {
color: #fff;
text-align: center;
}
.footer-header .heart {
color: red;
}
.footer-logo-table {
float: left;
}
.footer-logo {
width: 67px;
}
.footer-social-table {
width: 100%;
text-align: center;
}
.social-list {
display: inline-flex;
list-style: none;
}
.social-list li {
margin-left: 10px;
margin-right: 10px;
}
.social-list img {
width: 55px;
}
.footer-text-table {
float: right;
text-align: right;
margin-top: 25px;
}
.footer {
font-size: 12px;
color: #fff;
}
.footer a {
text-transform: uppercase;
color: red;
}
#media only screen and (max-width:360px) {
.cta-button .btn-holder {
font-size: 18px !important;
}
.footer-social-table {
width: 100%;
}
.social-list img {
width: 50px;
}
}
#media only screen and (max-width:768px) {
.wrapper {
overflow: hidden;
}
.section {
display: inline-block;
margin: 0;
margin-top: 15px;
text-align: center;
}
.pic .content {
width: 100%;
}
.section .home {
width: 65%;
}
.desc-container {
width: 100%;
}
.desc-table {
margin: 0 auto;
}
.desc-table .h3 {
font-size: 20px;
}
.desc-table .price {
font-size: 24px;
}
.size {
font-size: 20px;
}
.section .button-container {
margin-top: 25px;
margin-bottom: 25px;
width: 100%;
}
.button-container .button-table {
margin: 0 auto;
padding-bottom: 25px;
}
.outer-table-2 {
width: 100%;
}
.cta-button .btn-holder {
font-size: 23px;
}
.outer-table-3 {
width: 100%;
}
.footer-social-table {
width: 100%;
}
.social-list {
padding: 0;
}
}
</style>
</head>
I figured it was because it was because the #media screen and it had to be either "#media only screen" or "#media (){..." but none of those did anything.
What I expected (running on web browser) vs what actually happens (gmail app)
Here's a link to the whole code:
JSFiddle
Even if you can't help, thank you for reading.
UPDATE!!!
Thanks to Digital_Frankenstein, I was able to fix the problem. What I should've done was add some !important tags on my CSS, and specifically on the media queries. For future HTML Email Devs, don't forget this. Because this is really important.
took me a while to debug this, taking section by section out.
I hate default styles in the head. Makes it so much harder to debug, but each to their own and I know a lot of people are shifting to that method because of the Gmail update.
To resolve your issues in Gmail:
You need to add !important to all media query CSS, to override default styling.
Your slogan-hr was pushing everything out because of it's vh base width. In your media query I added an override of width:90%!important;.
You need to reduce the font size of your last button. It's blowing out at 23px in Gmail. I would suggest 20px maybe?
Your footer doesn't look too great. Best if you fiddle with that further, as both items sitting right up against the edges doesn't look great.
Finally, I would suggest avoiding this technique if you aren't completely confident with it.
I personally don't see the worth in it, since Gmail started rendering responsive code, but I know some devs use it for the outlier mobile email clients and that makes sense.
But I stick with old school tables since it just works and my clients will be managing the templates.
If I were always available to update and manage the templates I build, then it makes sense.
Just some food for thought. Hope this resolves your issues :)
In My case, actually I was using the other syntax which was working fine in other place but not in gmail so if you are using this syntax
#media only screen and (max-width: 480px) {
table[class="w320"] {
width: 320px !important;
}
This works fine in all other places but not in gmail app, so for that use the better syntax:
#media only screen and (max-width: 480px) {
table.w320{
width: 320px !important;
}
}
The media query is changing everything but not the colour property. I wonder why? It is only working if I don't define the color property and leave it to default. Why media query can't change the color?
https://jsfiddle.net/6spv3mrf/
<style>
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
</style>
You need to move #media css after your h1 css. Right now you are basically overwriting your #media properties with your normal css. If you add for example body inside your #media properties then your general body css should also be defined before the #media properties.
You can find more information in the official documentation:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all #media rules containing the declaration and on all links on the path through which the style sheet was reached.
You can find full documentation on the link.
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
move the media query to the end of the css
more info on why it works
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
As we already wrote in the comments: The media query has to follow AFTER the general rule, since otherwise it is overwritten by the properties in the general rule (which apply to everything, so it's a matter of order):
Here's the (edited) code from your fiddle, which, BTW, you can as well put into a snippet here on SO:
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
<div id="box">
<div id="text">
<h1>
Random<br> Text
</h1>
</div>
</div>
I have a small problem with centering some anchor elements I have written. I only can't center them on a mobile version of the site, they seem to be a little bit placed to the left side. To change the style of the site for mobile version I used #media queries.
That's the code:
HTML
<div id="page">
<ul id="icons">
<li><object type="image/svg+xml" data="images/pl.svg"></object></li>
<li><object type="image/svg+xml" data="images/gb.svg"></object></li>
</ul>
<img src="images/ryszard_final.png" alt="Ryszard Kukliński Logo" />
<div id="buttons_div">
BIOGRAFIA
RECENZJA
<div style="clear: both;" class="btn"></div>
O PROJEKCIE
KOMIKS
</div>
</div>
CSS
/******************
GENERAL
******************/
body {
background-color: #1f1f2e;
color: white;
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Lato', sans-serif;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: white;
}
/******************
MENU PAGE
******************/
img {
display: block;
margin: 0 auto;
height: 20%;
width: 20%;
margin-bottom: 5%;
margin-top: 5px;
}
.btn1 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
height: 15%;
width: 40%;
border-radius: 10px;
line-height: 70px;
cursor: pointer;
border: 3px solid #a20000;
display: block;
position: relative;
overflow: hidden;
background: transparent;
transition: 0.3s;
margin-bottom: 15%;
}
.btn1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
opacity: .5;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
}
.btn1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
transition-delay: 0.2s;
}
.btn1:hover {
color: #fff;
}
.btn1:hover:before {
top: 0;
}
.btn1:hover:after {
top: 0;
}
.btn1_float {
float: left;
}
.btn2_float {
float: right;
}
#icons {
position: absolute;
right: 0;
list-style: none;
margin: 0;
padding: 0;
float: right;
margin-top: 10px;
margin-right: 5px;
}
#icons li {
display: inline-block;
}
object {
height: 16px;
width: 32px;
}
#media (max-width: 480px) {
#buttons_div {
width: 75%;
margin: 0 auto;
}
.btn {
float: left;
width: 75%;
}
}
#media (min-width: 1000px) {
#buttons_div {
max-width: 65%;
margin: 0 auto;
}
}
When I try to center it, it just doesn't work. Look at the photo below to see what I mean:
Page
As you see it doesn't work. It just pushes all buttons to the left. Can anyone help me, please?
You could try using the "position:absolute;" instead of text-align in the css page,then write the position of the buttons using bot:x px ,top:y px and so on,i think that the buttons show a litlle bit to the left because of the media queries that you used
You can:
Place them in ul, assign li before anchor, and text-align center
or
Place an anchor within a div, set divs width to 100% and text-align center
In your media query #media (max-width: 480px), change the width of .btn to 100%.