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.
Related
Im trying to remove the white space that is remaining on the right hand side of the screen. Ive tried setting the css stylings to the container to padding 0 and margin 0 including the important tag after. I do have a div sized col 4 and in the inspector tool its shwoing padding 12 but when i apply 0 padding to it, its still there causing side scroll. Ive even applied the important tag to it and it still remains. Below is the live link of the website im working on. Ill include the CSS code below. https://abraham-solis.github.io/reactPortfolio/. This is the styling library im using https://reactstrap.github.io/?path=/story/home-installation--page
Landing Page CSS
.hide {
background: black;
overflow: hidden;
}
/* Spans are inline Elements so need Display inline-block to move */
.hide span {
transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
display: inline-block;
}
#GG {
text-decoration: none;
color: inherit;
}
.space {
margin: 0 !important;
padding: 0 !important;
}
#media screen and (max-width:600px) {
.land {
max-width: 100%;
max-height: 100%;
}
.big-text {
text-align: center;
}
.nav-links li {
padding-left: 0;
text-align: center;
justify-content: space-around;
padding-right: 3px;
}
ul{
padding-left: 0 !important;
}
#logo{
text-align: center;
padding-bottom:10px ;
}
.intro-text, .text{
text-align: center;
}
}
Project Section CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bg {
background-color: rgb(15, 39, 63);
width: 100%;
overflow: hidden;
}
.header {
text-align: center;
padding-left: 10rem;
padding-top: 9rem;
margin-bottom: 80px;
font-size: 5rem;
font-family: "Lobster", cursive;
color: rgb(255, 249, 254);
text-shadow: 2px 2px #ff24a4;
text-align: center;
filter: drop-shadow(5px 5px 5px black);
-webkit-filter: drop-shadow(5px 5px 5px black);
}
.title {
font-family: "Heebo", sans-serif;
font-size: 2rem;
color: rgb(15, 39, 63);
}
.summary {
font-family: "Heebo", sans-serif;
font-size: 1rem;
color: rgb(15, 39, 63);
}
#media only screen and (max-width: 600px) {
.container {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
.header {
text-align: center;
}
.paragraph {
text-align: center;
}
.z{
z-index: 5;
}
}
.stretch{
min-width: 100% !important;
}
In the about me section, you got margins that are overflowing. Look for the .row class and check the calculation you are doing.
This:
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--bs-gutter-x)*-.5);
margin-right: calc(var(--bs-gutter-x)*-.5);
margin-top: calc(var(--bs-gutter-y)*-1);
}
Change to for example (or edit calc so it's not overflowing):
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-left: 0px;
margin-right: 0px;
margin-top: calc(var(--bs-gutter-y)*-1);
}
I can not see your html code but problem in your div which has class name as row
You could make the scrollbar invisible using
.[insert div name]::-webkit-scrollbar
{
display: none;
}
Disable margin-left and margin-right properties of .row class.
Source : https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
You will need CSS and you have 2 options:
Option #1) Hide both the horizontal and vertical scrollbar.
Add overflow: hidden; to the body
Option #2) Hide Scrollbars But Keep Functionality
Hide scrollbar for Chrome, Safari and Opera
.example::-webkit-scrollbar {
display: none;
}
Hide scrollbar for IE, Edge and Firefox
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Ive been using simple html and css to make my new webpage. its just a gradient background with a gif in front of it. the gif has been giving me a lot of grief lately because it keeps moving out of to the right and extending the scree. i just want the gif to be centered perfectedly and at a good size right not the desktop version looks ideal but the mobile version looks so small as seen below I would just like the gif to be wider and feel the screen more without extending it.
my HTML goes as following
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
background: radial-gradient( circle closest-side, #d5c83d 80%, #e9e5bf, #8482e3);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
/*height: 100%; */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 20px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav>li {
display: inline-block;
}
.masthead-nav>li+li {
margin-left: 20px;
}
.masthead-nav>li>a {
padding-right: 0;
padding-left: 0;
font-size: 30px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255, 255, 255, .75);
border-bottom: 2px solid transparent;
}
.masthead-nav>li>a:hover,
.masthead-nav>li>a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav>.active>a,
.masthead-nav>.active>a:hover,
.masthead-nav>.active>a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Affix and center
*/
#media screen and (max-width: 992px) {}
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="container">
<div class="masthead clearfix">
<div class="container inner">
<h3 class="masthead-brand"></h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home*</li>
<li>Magazine#</li>
<li>Abouti</li>
</ul>
</nav>
</div>
</div>
<div class="innercover">
<img class="img" src="https://static.tumblr.com/y8b11bc/u05qfybi7/ezgif.com-resize.gif" ; style=" top: 0%; width: 100%; max-height: 100%; " ;></img>
</div>
Adjust your css code to change the size of the GIF depending if it's mobile or desktop. Also, adjust the div that holds the GIF to center the items.
#media (min-width: 768px) {
.img{
width: X%
}
.innercover{
display: flex;
justify-content: center;
align-items: center;
}
I'm trying to make a responsive banner. I have a background image that resizes as you adjust your screen and a transparent div element which contains text.
Issue 1
The problem is that my transparent div element is not resizing properly
I tried to adjust my transparent div element to the top and bottom of the image by using height:100%, but that didn't work it left a gap on top. (Picture below shows what I'm talking about)
Issue 2
Also, text inside my transparent div element should be adjusted center-left side. I got the text to move to the left side but it's not centered in the transparent div element.
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
width: 100%;
height: 423px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.caption {
position: absolute;
top: 13%;
left: 0%;
text-align: left;
color: white;
font-weight: bold;
height: 100%;
width: 150px;
}
.transbox {
padding: 50%;
max-width: 100%;
border-radius: 6px;
width: 100%;
height: 100%;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
.transbox span {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
}
.trans-text-top {
margin-left: -55px;
margin-top: 26px;
font-size: 200%;
}
.trans-text-bottom {
margin-left: -55px;
margin-top: -20px;
font-size: 220%;
}
.linebreak {
padding-bottom: 30px;
}
upper-linebreak {}
#media screen and (max-width: 700px) {
.transbox {
display: none;
}
}
<div class="banner">
<div class="caption">
<div class="transbox">
<span class="trans-text-top">Tree</span>
<div class="linebreak"></div>
<span class="trans-text-bottom">Pathway</span>
</div>
</div>
</div>
Different approach
HTML structure
<div class="banner">
<img src="">
<div class="caption">
<h1>...</h1>
<h2>...</h2>
</div>
</div>
CSS
.banner {
position: relative;
...
}
.caption {
position: absolute;
top: 0;
...
}
Handle font-size in .caption with vw.
Example
.banner {
position: relative;
}
.banner img {
/* Make image responsive */
display: block;
width: 100%;
max-height: auto:
}
.banner>.caption {
position: absolute;
top: 0;
width: 25%;
height: 100%;
background: white;
opacity: 0.6;
}
.banner>.caption>h1,
.banner>.caption>h2 {
text-align: center;
}
.banner>.caption>h1 {
font-size: 5vw
}
.banner>.caption>h2 {
font-size: 4vw;
}
<div class="banner">
<img src="https://i.imgur.com/abF4sj3.jpg" alt="">
<div class="caption">
<h1>Tree</h1>
<h2>Path</h2>
</div>
</div>
Hint
The advantage of this approach is that you don't have to deal with the background-image stuff.
I placed an exact height on your .transbox class since it was defined in the parent container.
.transbox {
padding:50%;
max-width: 100%;
border-radius: 6px;
width:100%;
height:423px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
I set margins left and right to auto. This centers your text. Hope it helps.
.trans-text-top{
margin-left:auto;
margin-right:auto;
margin-top:26px;
font-size: 200%;
}
.trans-text-bottom{
margin-left:auto;
margin-right:auto;
margin-top:-20px;
font-size: 220%;
}
Try this.Hope this will work for you.
HTML Code
<div class="banner">
<div class="captionTransbox">
<h1 id="captionTop">Tree</h1>
<h2 id="captionBottom">Pathway</h2>
</div>
</div>
CSS Code
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 423px;
position:relative;
}
.captionTransbox{
height: 423px;
width: 300px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
#captionTop {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 50% 20% 0% 5%;
}
#captionBottom {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 0% 20% 20% 5%;
}
#media screen and (max-width: 700px) {
.captionTransbox {
display: none;
}
}
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.
I have a flexbox with a text overlay on top and everything looks fine when the browser is full width:
However, when I shrink the browser to smaller width, the overlay becomes wider than the image:
My HTML looks like this:
<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}">
<img src="{{::options.picture}}" alt="" width="100%" height="100%"/>
<h3><span>{{::options.title}}</span></h3>
</a>
And my CSS looks like this:
a.picture {
position: relative;
//width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
What am I missing from my CSS so that the overlay "locks" in with the image? Thanks!
Set the width of parent container equal to the image size.
a.picture {
position: relative;
width: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
<a class="picture">
<img src="https://static.pexels.com/photos/1510/road-sky-sand-street.jpg" width="100%" height="100%"/>
<h3><span>Content</span></h3>
</a>