As the title says, I'm wondering how to get this image to span the whole browser window/page instead of having the gray margins.
Im using this theme:
https://raw.githubusercontent.com/olleota/themes/master/paperweight/main.html
And, its in action here:
http://fvcking5hit.tumblr.com/
where you see the gray borders and I just want it to span the whole page wile keeping the fade effect.
OK thank you for the additional comment, this should be all the code you need.
Find this code in your theme (it's showing at around line 226):
#masthead {
margin: 0 10%;
padding: 15% 0;
width: 80%;
}
Change it to:
#masthead {
margin: 0;
padding: 15% 0;
width:100%;
}
There are several references to #masthead in your css, so you will need to target the last reference for this to work (or tidy up the css by removing the old properties).
UPDATE
As you pointed out there is a media query changing the properties of the masthead.
Find this code:
#media (min-width: 1500px){
.theme-name-Paperweight #masthead {
margin: 0 20%;
width: 60%;
padding: 10% 0;
}
}
And change to:
#media (min-width: 1500px) {
.theme-name-Paperweight #masthead {
margin: 0;
width: 100%;
padding: 10% 0;
}
}
Related
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).
So i have a simple button with a shiny effect run through using ::after and transform.
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
In original code, the percent in #keyframe was 100% and 'sheen' effect ran forward in exactly 2s.
Here i set the percent to below 100% (75% for example), the effect will run forward for 75% of the animation-duration, then runs backward for the last 25%.
Does that behavior have anything to do with 'transform' property? can anyone explain it to me
As a matter of fact, the animation does not repeat itself. Animation begins-and-ends. It just emulates properties that give it a reference value when you not define what to do animation.
Here, you basically define that moment by giving concrete properties such as where it will be at the 75%th moment of 2s, what color it will be, what its opacity will be. But from 75.1% you haven't defined what to do until the animation is complete (100%).
If CSS Animations are not defined at any instant of the frames, they accept parent properties that refer to it.
.dummy {
animation: dummy ... ... ...;
opacity: .75;
}
#keyframes dummy {
50% {
opacity: .5;
}
}
In the example above, the element will animate with an opacity of typically .75, .50 and .75 respectively.
If we didn't specify the property opacity: .75;, it would also animate the 1.0, .50 and 1.0 animation with default values.
You can imagine this for the opposite situation as well.
In other words, if I define where an element will be initially in the animation and this position is different from the values it actually references, the element will be animated by moving from the point I defined to the reference values.
Here is a simple example,
p {
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>
Returning to the example in your question, it would suffice to define that it should exhibit the same behavior between 75% and 100%. Here is the example;
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75%, 100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
I just found out about position sticky in CSS. I thought this is really cool and eliminates the need of writing a JS function for this simple behaviour.
So, I thought I give it a try. In the following example the header is sticking to the top, but I don't understand why the footer is not sticking to the bottom:
body {
height: 180vh;
padding: 0;
margin: 10px 0;
}
header,
footer {
position: -webkit-sticky;
position: sticky;
padding: 10px;
color: #ffffff;
text-align: center;
}
header {
top: 0;
background-color: brown;
}
footer {
bottom: 0;
background-color: #2d3142;
}
<header>I'm sticking to the top of the page</header>
<footer>I'm sticking to the Bottom of the page</footer>
Why is that?
I'm not sure about sticky but if all you are trying to do is put your footer at the bottom you can try this.
.alwaysBottom {
position: absolute;
bottom: 0;
}
I have been using the following css code:
#MainBox
{ width: 488px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px; //this being half the width
}
To ensure that the items on the page are centred. The problem is, when viewing this on an iphone (and i'm assuming similar on other smartphones) the left hand side of the page is chopped off! Does anyone know how I can resolve this issue and bring everything into fit?
Thank you!
You're moving the element to the left by 244px with that CSS, and the iphone screen being so small this is causing it to be cut off. Try this:
#MainBox{
width: 488px;
height: 181px;
margin: 236px auto 0 auto;
}
The technique above to center a div is a little obsolete.
Use margin: auto, width to a fixed value (which you already have), and make the parent position:relative.
I created a group chat for the iPhone and its almost perfect. It uses the complete viewport by position various elements with:
#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}
which makes it look like this:
But when the keyboard pops everything shifts and a grey area appears below:
The height of that grey area is the height of the statusbar and the height of the Debug Console together (without the Debug Console is just the height of the statusbar).
Why does it insert this grey area and how can I avoid it?
#message-input:focus {
margin-bottom: -XXXpx;
}
Where XXX = height of problem grey area. Could be a quick fix for it...