Background image doesn't show on small devices CSS. I have a background image that gets zoomed in via CSS but when the screen is made smaller the background image disappears and is white. I am trying to make an app so it needs to work on all devices and sizes. This does work fine when it doesn't zoom in. I have pasted my code below. Thanks
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0):}
body {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
-webkit-user-select: none;
/* prevent copy paste, to allow, change 'none' to 'text' */
background-color: #E4E4E4;
);
background-attachment: fixed;
}
/* Portrait layout (default) */
.app {
position: absolute;
/* position in the center of the screen */
background-position: center;
position: relative;
bottom: -300px;
font-family: 'Roboto', sans-serif;
}
/* Landscape layout (with min-width) */
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
h1 {
font-size: 90px;
font-weight: normal;
margin: 0px;
overflow: visible;
padding: 0px;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
p {
color: blue;
font-family: 'Roboto', sans-serif;
font-size: 15px;
text-align: center;
color: white;
}
.event {
border-radius: 4px;
-webkit-border-radius: 4px;
color: #FFFFFF;
font-size: 12px;
margin: 0px 30px;
padding: 2px 0px;
}
.createAnAccount {
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
}
.logintable {
text-align: center;
}
.login {
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
}
.event.listening {
background-color: #333333;
display: block;
}
.event.received {
background-color: #4B946A;
display: none;
}
#keyframes fade {
from {
opacity: 1.0;
}
50% {
opacity: 0.4;
}
to {
opacity: 1.0;
}
}
#-webkit-keyframes fade {
from {
opacity: 1.0;
}
50% {
opacity: 0.4;
}
to {
opacity: 1.0;
}
}
.blink {
animation: fade 3000ms infinite;
-webkit-animation: fade 3000ms infinite;
}
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -999;
}
.background {
background: #22313F;
background-image: url(https://i.ytimg.com/vi/b7WD-
SpNX_I/maxresdefault.jpg);
background-size: cover;
width: 100%;
height: 100%;
animation: zoom 12s forwards ease-out;
Html code below
<body>
<div class="bg">
<div class="background"></div>
</div>
<body>
Your #media query has minimun pixel limit. If you delete this, it will work.
So change this line
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px)
into this
#media screen and (min-aspect-ratio: 1/1)
By setting min-width you only apply this background changes if the viewport is 400 pixels wide or wider.
Related
This is a CSS and HTML animation, simple text filling.
For some reason the text jumps when there is a space or if I add a dash?
Below you can see the output:
I've added the code below!
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 20vh;
color: #ffcc00;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 4px solid black;
overflow: hidden;
animation: animate 6s linear infinite;
}
/* animation to fill text */
#keyframes animate
{
0%,10%,100%
{
width: 0;
}
50%,70%
{
width: 100%;
}
}
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>
The problem lies in the way you handle text in your animation.
You are animating a string of text appearing slowly but don't account for any of the inherit string properties such as line breaking.
During your animation, the first word: "COMING", appears normally as the width increases, but once the hyphen appears, HTML thinks you have inserted a word break point and tries to break "SOON" to a new line.
This can be solved by adding white-space: nowrap; to your ::before section, to prevent it from breaking as the animation plays out.
HTML
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>
CSS
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: blue;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 20vh;
color: #ffcc00;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 2px solid black;
overflow: hidden;
animation: animate 5s linear infinite;
white-space: nowrap;
}
/* animation to fill text */
#keyframes animate {
0%,
10%,
100% {
width: 0;
}
50%,
70% {
width: 100%;
}
}
This might be a dumb question, but I have a background that has high contrasting colors and I want my <ul>'s <li>s to change color depending on what the background color is for each individual <li>. I really don't want to bloat my CSS by adding the color property to each one. Please can someone tell me if there is any way to do this.
I'm working an a CodePen project. It's a personal portfolio page. Just for reference I'll share it with you but it's not finished yet. I want the list under My Skills to be "color responsive" (if that even exists) so that the items at the bottom are easier to read.
Here is the pen.
Much appreciated!
Just using CSS, you can use mix-blend-mode to ul.
Chcek with css to ul element as mix-blend-mode: difference;
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.
See here. Ref: Pen
var modeList = [
"normal",
"multiply",
"screen",
"overlay",
"darken",
"lighten",
"color-dodge",
"color-burn",
"hard-light",
"soft-light",
"difference",
"exclusion",
"hue",
"saturation",
"color",
"luminosity"
],
elem = document.querySelector(".box"),
propertyName = "mix-blend-mode",
modeElem = document.querySelector(".mode-name"),
duration = 2500;
var i = 0;
var activate = setInterval(function() {
if (i == modeList.length) i = 0;
var mode = modeList[i];
elem.style.mixBlendMode = mode;
modeElem.innerText = mode;
i++;
}, duration);
#charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.wrapper {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/washington.jpg") no-repeat center center fixed;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Nocturno Display Medium 4", Georgia;
font-style: normal;
font-weight: normal;
font-stretch: normal;
height: 100%;
width: 100%;
}
.box {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
font-size: 8vw;
border-top: 10px solid #BF0A30;
border-bottom: 10px solid #BF0A30;
line-height: 1;
background-color: #002B65;
color: white;
background-size: cover;
mix-blend-mode: hard-light;
height: 400px;
height: 50vh;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.box p {
text-rendering: optimizeLegibility;
word-spacing: 5px;
margin: 0;
}
.mode-name-wrapper {
position: absolute;
bottom: 12vh;
left: 0;
right: 0;
color: #002B65;
text-align: center;
text-transform: uppercase;
font-size: 17px;
margin: 0 auto;
padding: 0;
width: 135px;
height: 135px;
border: 5px solid white;
background-color: #ddd;
border-radius: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mode-name-wrapper:before {
content: "★";
display: block;
line-height: 1;
font-size: 20px;
margin-top: -20px;
margin-bottom: 10px;
color: #ef0d3c;
animation: spin 2.5s ease;
animation-iteration-count: infinite;
transform-origin: center center;
}
.mode-name {
position: relative;
left: 0;
right: 0;
animation: nudge 2.5s ease;
animation-iteration-count: infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes nudge {
0% {
transform: translate(0, 0);
}
80% {
transform: translate(0, 0);
}
90% {
transform: translate(-10px, 0);
}
93% {
transform: translate(12px, 0);
}
95% {
transform: translate(-8px, 0);
}
100% {
transform: translate(0, 0);
}
}
<link rel="stylesheet" href="https://fonts.typonine.com/WF-003562-001299.css" type="text/css" />
<div class="wrapper">
<div class="box">
<p>Washington D.C.</p>
</div>
<small class="mode-name-wrapper">
<span class="mode-name">hard-light</span>
</small>
</div>
I am creating some product cards for my website that will display a short description on hover, but I cannot make them adapt to the current description which results in the button being thrown out of the card.
At the moment my dimensions are fixed, but I tried setting my current height as min-height and it didn't work out.
I have created a dummy card in a jsFiddle for you to illustrate my issue here. Alternatively, you can use the snippet below.
#section1 > .wrapper {
/* Text */
text-align: justify;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
height: 226px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Styling */
background-color: #2f2f31;
border: 5px solid #2f2f31;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: #bbbbbb;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: 159px;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button {
/* Text */
color: #bbbbbb;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid #bbbbbb;
outline: none;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
/* Text */
color: #0c0c0c;
/* Styling */
cursor: pointer;
background-color: #bbbbbb;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
<div class="hot-topic">
<div class="topic">
</div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
<br/>
<br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<button class="button">Read More</button>
</div>
<h3>HP Pavilion Slimline S5 1010</h3>
</div>
Watching your jsFiddle, I think your card looks like the ones Codepen uses. I have watched Codepen's code and the card's size is fixed. They load they content through iframe and that's why their button doesn't overflow the parent. I hope it helps.
By using the following code in JavaScript, the problem is fixed.
var height = $(".caption").height();
for (var i = 0; i < document.getElementsByClassName("button").length; i++) {
height += $(".button").height();
}
for (var i = 0; i < document.getElementsByClassName("caption").length; i++) {
document.getElementsByClassName("caption")[i].style.height = height;
}
Here is the solution with simple javascript. I've included the whole html file as the code block that i pasted were not working either in snippet or in other people's local.
<html>
<head>
<style>
#section1 > .wrapper {
/* Text */
text-align: justify;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
height: 226px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Styling */
background-color: #2f2f31;
border: 5px solid #2f2f31;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: #bbbbbb;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: inherit;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button {
/* Text */
color: #bbbbbb;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid #bbbbbb;
outline: none;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
/* Text */
color: #0c0c0c;
/* Styling */
cursor: pointer;
background-color: #bbbbbb;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
</style>
</head>
<body>
<div id="hot-topic" class="hot-topic">
<div id="parentDiv">
<div id="topic" class="topic">
</div>
<div id="caption" class="caption" onmouseover="changeHeight(this)">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
<br/>
<br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<button class="button">Read More</button>
</div>
</div>
<h3>HP Pavilion Slimline S5 1010</h3>
</div>
<script>
function changeHeight(x){
document.getElementById('parentDiv').style.height=x.clientHeight;
document.getElementById('topic').style.height=x.clientHeight;
document.getElementById('hot-topic').style.height=x.clientHeight+67;
}
</script>
</body>
</html>
I hope this is what you were looking for.
I am completely stumped on an issue I am having. It is the simplest issue, but I just can't locate the issue. I have a line of text with a border around it to act as a button. I increased the text within this and since then half of the text jumps to the next line whenever the viewport is lower than 1200px.
I created a snippet to replicate this, but even that won't help, so this most likely has to be seen live. The area the issue is at is in the "Grow your business with us" section at the very bottom of that section (under the 3 images).
Please view it in a viewport of less than 1200px
What is causing the self made button to be on 2 lines? I have the width set to 100%?
$(function() {
$('#see-all-services-text').animate({
opacity: 1,
left: '0%'
}, 700);
})
#home-img-block-section {
width: 100%;
height: 850px;
}
#see-all-services {
width: 100%;
height: 75px;
text-align: center;
}
#see-all-services-text {
opacity: 0;
font-size: 1.3em;
position: relative;
left: -30%;
}
#see-all-services-text a {
text-decoration: none;
color: #45a5ba;
cursor: pointer;
}
#see-all-services-button {
padding: 15px 20px;
border: 2px solid #45a5ba;
transition: ease-in-out .5s;
}
#see-all-services-button:hover {
border: 2px solid #45a5ba;
color: #FFF;
background: #45a5ba;
transition: ease-in-out .5s;
}
/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/
#media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
height: 670px;
}
#see-all-services-text {
font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="see-all-services">
<div id="see-all-services-text"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></div>
</div>
</div>
It's happening because your button is inline element. Set display:inline-block; to it and remove width:100%;, and everything should be ok.
Your snippet:
$(function() {
$('#see-all-services-text').animate({
opacity: 1,
left: '0%'
}, 700);
})
#home-img-block-section {
width: 100%;
height: 850px;
}
#see-all-services {
width: 100%;
height: 75px;
text-align: center;
}
#see-all-services-text {
opacity: 0;
font-size: 1.3em;
position: relative;
left: -30%;
}
#see-all-services-text a {
text-decoration: none;
color: #45a5ba;
cursor: pointer;
}
#see-all-services-button {
padding: 15px 20px;
display: inline-block;
border: 2px solid #45a5ba;
transition: ease-in-out .5s;
}
#see-all-services-button:hover {
border: 2px solid #45a5ba;
color: #FFF;
background: #45a5ba;
transition: ease-in-out .5s;
}
/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/
#media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
height: 670px;
}
#see-all-services-text {
font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="see-all-services">
<div id="see-all-services-text"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></div>
</div>
</div>
I have a full screen background video which I have added a "dimmed" div over the top of, to dim the video with a semi-transparent black fullscreen div. Code:
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .5);
}
HTML:
<div class="full_size dimmed">
<video autoplay loop poster="assets/images/home_page/polina.jpg" id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/polina.mp4" type="video/mp4">
</video>
<div class="not_dimmed">
{{APP_NAME}}</h5>
{{REGISTER_TEXT}}</h5>
{{LOGIN_TEXT}}</h5>
<a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >{{BLOG_TEXT}}</h5></a>
</div>
</div>
I want the anchor text that I have placed over the top of the video background to not be dimmed. As you can see I have added a not_dimmed class and tried to override the dimmed styles with no dimming.
However it is still dimmed. How would I "undim" the text?
All css:
.vertical-center {
height: 100%;
/*Fallback for vh unit
You might also want to use
'height' property instead.
Note that for percentage values of
'height' or 'min-height' properties,
the 'height' of the parent element
should be specified explicitly.
In this case the parent of '.vertical-center'
is the <body> element */
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
flex-wrap: wrap;
flex-direction: column;
}
/*large text on the home page*/
#motto-text {
height: calc(100% - 160px);
/*font-family: 'woodford_bourneregular', Arial, sans-serif;
font-weight: 100;*/
}
.white-text {
color: white;
}
.brand-colour-text {
color: #95F666;
}
.light-text {
font-weight: 100;
}
.medium-text {
font-weight: 300;
}
/*text on the left side of the page*/
.left-text {
margin: 60px 0px 0px 60px; float: left;
}
/*text on the right side of the page*/
.right-text {
margin: 60px 60px 0px 0px; float: right;
}
.italic-text {
font-style: italic;
}
.clickable {
cursor: pointer;
}
.with-border {
border: 1px solid #95F666;
border-radius:3px;
padding: 12px;
}
#sign-in-button {
margin-top: 48px;
}
.nav-item:hover {
color: #95F666;
}
#app-name:hover {
color: white;
}
#sign-in-button:hover{
background-color: #95F666;
color: dimgray;
}
#media only screen and (max-width: 500px) {
h3 {
font-size: 17px;
}
h4 {
font-size: 13px;
}
h1 {
font-size: 20px;
}
#app-name {
display: none;
}
right-text {
margin: 60px 30px 0px 30px;
}
}
.full_size {
height: 100%;
background-size: cover;
}
/*subtract the height of the footer to get an accurate vertical center*/
#home_page_background {
height: calc(100% - 60px);
background-repeat: no-repeat;
background-attachment: fixed;
}
#media only screen and (orientation: landscape) {
#home_page_background {
background-image: url("../assets/images/home_page/bg_ls_strawberry_dark.jpg");
}
}
#media only screen and (orientation: portrait) {
#home_page_background {
background-image: url("../assets/images/home_page/bg_p_strawberry_dark.jpg");
}
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .5);
}
.not_dimmed {
z-index: 11;
background: transparent;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../assets/images/home_page/polina.jpg) no-repeat;
background-size: cover;
}
/*for ie 9*/
video { display: block; }
#media screen and (max-device-width: 800px) {
html {
background: url(../assets/images/home_page/polina.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
You could apply the background-color-dim from the :after-element to the anchors' container instead.