So I'm kind of a newbie when it comes to coding, and I've been trying all day to position my elementor-post__badge element on top of a header text. The catch is that I want this positioning to be relative to the header so the position will be the same across all mobile devices. How can I do that? I tried the following code but it didn't work and the position of the badge element is different from one device to another:
#media only screen and (max-width: 767.98px) {
#parent {
position: relative;
}
.elementor-post__badge {
position: absolute;
top: 178px !important;
left: -14px;
font-size: 12px !important;
}
}
This is what I'm trying to achieve with the "News" badge on top of the header, but it doesn't work on all devices
Try using other units of measurement, meant for percentages of page width and height such as, vw,vh, and em, instead of px. The change in viewer width/height is what causes inconsistencies in alignment for certain elements across browsers and devices.
https://www.w3.org/Style/Examples/007/units.en.html
I am trying to edit a page to use the full width of the page. I am having problems setting out the div layout. There is a div there already
<div id="rightPanal" style="margin-top: 425px;">
but it has things too far to the right and it is a narrow column going down the middle of the page.
I deleting/editing/ a lot of div's already there and I end up with nothing and its all over the place on different broswers.
Can I go to the .css file and just write some css that would give me a box in the middle (where inside i can put in two columns) of the page that doesn't interfere with other div and layout on the screen - say start X and Y on the screen - 4 pictures of equal size and text underneath the four boxes - all square ?
Position: absolute
#rightPanal {
position: absolute;
top: 50%;
}
It sounds like you want absolute positioning:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
This code should get you close:
#rightPanal {
position: absolute;
top: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
box-sizing: border-box;
}
I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.
I basically wanted to achieve what this person wanted to achieve with an image in the link below except I want to do it with an embedded video whilst keeping it repsonsive.
Removing black borders 4:3 on youtube thumbnails
Many thanks.
HTML
<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
For your use case, I don't think you'll be able to use just css.
Usually we add letterboxing or pillar boxing around video iframes to keep the height and width at a certain ratio for presentation. But in that case, the black borders would just be as simple as a css background.
To keep things responsive, you would set the height to something like zero (like you have) and use the padding hack to keep the aspect ratio of the video (in this case a 16:9 video; 9/16 * 100 = 56.25%). That number would be either your padding-top or padding bottom value. Since the padding is measured with percent, this scales the padding in relation to the width keeping the correct ratio no matter what width you size the video to.
In your case, this video actually has the letterboxing in the actual video which you can see from the source of the video tag within the iframe. I'm not sure why you have the padding-top:30 but that makes the black borders even bigger. You'll need to hack your situation even more though because of the built in letterboxing. I put together a jsfiddle demo here which includes a few comments but it uses JS to achieve what you're looking for.
The concept for the code is as follows:
You want the outer container to crop off the bottom and top of the
video. Assuming you wanted the video to be responsive, and be cropped, you need to always have the actual video be larger than the outer container which masks it.
The video should be moved up in relation to how wide the video is vs the thickness of the top border
You'll want to shrink the height of the outer container a bit to compensate for the negative top margin yet still hide the bottom portion of the video
Personally I don't like doing expensive DOM operations on resize which maybe is the reason you asked for solely css but FWIW, you have the demo.
Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.
Cut the 1px off all edges with CSS:
.embed-container {
position: relative;
padding-bottom: 43%; /* Aspect ratio of the video */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
HTML:
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
CSS:
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
You will find more details here
I had this same issue and the problem was simple to solve. My videos were embedded in Wordpress pages and posts using oEmbed. Wordpress was wrapping my embedded videos in <p> tags, the <p> tags had some margin which was causing black borders on the top and bottom of my videos. I used the following bit of jQuery to remove the <p> tags from my embedded videos:
$('.embed-container iframe').unwrap();
I solved this problem by removing padding-top in .embed-container
padding-bottom: 56.25%; will set screen ratio to 16:9 and remove the black bar in top and bottom.
padding top here will add extra black bar area back.
I created a solution for this exact problem using a portion of this github post. Removing Black Bars. It doesn't change vimeo's background color but merely hides it from the viewport.
https://github.com/davatron5000/FitVids.js/issues/130
#myid {
height: 112.6%;
}
However, If you add a width using CSS "vw"(viewport width) it will size consistently on any monitor/device without showing the black background. I added a margin so that the iframe will stay centered in the div once the width is shorter.
#myvimeoiframeID {
height: 112%;
width: 80vw;
margin: 0 15% auto;
}
In my parent container that holds the video, I added:
.embed-container {
padding-bottom: 40.25%;
}
This seems to make sure the video shows in the div. When I removed this section the video disappears but you can still here it play. So there is something that is pretty awesome with the padding-bottom: 40.25%;
I changed the vimeo embedded iframe code to have a height="100%".
So you can add a height to the iframe or you can do it in css. In order to control the height by css, I kept the base height in the iframe at 100% and any adjustments to that base height is through the css.
Simply put frameborder="0" as one of your attributes.
I just solved this -
The video container was built with a video-captions-container DIV which was a black transparent bar.
I need some stuff that´s inside a specific div element, to float in a specific place.
Naturally, I get different positions according to screen resolutions and browsers.
I need this block of content to appear on the top right corner, but not at the very very top, but about 3 centimeters from the top.
How can I get the position fixed?
I´ve tried this:
#sidebars {
margin: -37% 1% 0 0;
width: 35%;
}
And it works in one page with a specific browser only (I´m using latest firefox version to test this).
So, I´ve tried a fixed position, only to get a result that does not respect the margins. So, I´ve added some float to the right, with no consequence:
#sidebars {
float: right;
margin: -37% 1% 0 0;
position: fixed;
width: 35%;
}
Any ideas? Thank you very much in advance for your insight!!
Rosamunda
Sounds like you do want a fixed position, but I'm pretty sure you don't need the margins. To be clear, position: fixed; will position an element with the window (whereas absolute is to the document). I'm betting you're looking for something like this:
#sidebars {
position: fixed;
width: 35%;
right:0px;
top:0px; /* or whatever spacing you said you need from the top of the window */
}
I am weak in css and can you please help with this problem. You can see problem by clicking on Login/Register link in the below url.
Test box url
This is done in drupal. I am not able get the css to make the div with id "toboggan-login" to appear under the "Login/Register" link
Forgot to mention. I put the below css code. It works in small resolution systems. But its does not work in my 22'' monitor.
div#toboggan-login {
position: absolute;
top: 23px;
left: 74em;
}
This will fix your issue:
CSS:
div#toboggan-login {
position:absolute;
left: 50%;
margin-left: 310px;
width: 160px;
}
Than if you want to distance it a bit from the Login/Register top, just add:
top:10px; or how much px you want!
To explain the above lines:
The left:50%; pushes your element in the middle of the screen, so even at window resize your element will stay there, centered.
But to set it appropriately to some center-left position than we add position-left that will adjust the element position to a desired amount of px left from the center.