I have a Wordpress blog where my featured images & videos extend outside of the post, but I've run into a problem.
Whenever I'm embedding videos outside of YouTube, the embedding messes up completely. And I'm not sure why.
I have two examples here, please check the link: https://imgur.com/a/4wnjY
The css line that controls the width is .fluid-width-video-wrapper, and the code is:
width: 113% !important;
height: 51px;
margin-left: -6.4%;
Live demo here:
Correct article: https://www.droppet.se/visuellt/en-man-uppfostrar-en-ekorre/
Incorrect article: https://www.droppet.se/sport/cavani-och-mbappe-kombinerade-till-ett-drommal/ (password wvideo)
Change the width: 113% to 100% and get rid of margin-left
.fluid-width-video-wrapper {
width: 100%;
height: 51px;
/* margin-left: -6.4%; */
margin-bottom: 7px;
}
Your container is the desired size.
The problem is inside the iframe; the div .media-container has these CSS rules, which prevent the video from being the full width of the framed document:
height: 56.23vw;
max-width: 177.85vh;
Removing the max-width rule from that class corrects the problem.
But since you're framing a third-party site, you won't be able to remove that class; instead you'd need to tweak the height of the iframe so that the framed site's rules match your layout. Changing your .fluid-width-video-wrapper height to any height larger than 85px seems to do it. (May not be the ideal way to fix this, though; I haven't looked closely enough at the rest of your code to understand why that height rule exists.)
Related
I am trying to make a Asp.net website, The homepage design is a single page portfolio style; by having each or "projects" as 100% height of the view port underneath each other allowing me to use anchor tags. My problem is that when I am using the tag it messes up my css and does not work properly so how can I fix this?
I have tried the following:
/* in CSS*/
html, body{
height:100%;
width:100%;
}
And I have added the height 100% tag to each of the parent divs and or elements of the divs I want to be 100% but still no luck. I am out of options!
I can't post the full code because it is way to long and I am on a different computer to my one with code.
I think I understand what you're asking, but I'm not completely sure, nor am I sure where the DOCTYPE, anchors or ASP.NET come into play.
Here's a demo of a full page document, with a few full screen child divs.
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: auto;
}
div {
width: 100%;
height: 100%;
}
Please keep in mind that percentage heights can become a headache really fast, so you need to understand exactly what you are doing.
Also note, this page is running Normalize.css which fixes browser discrepancies.
I have a dynamic created page with a panel which contains this:
<div class="x-panel-body x-panel-body-default x-panel-body-default" id="panel-1026-body" style="left: 0px; top: 0px; width: 1819px; height: 29px;">
I want to change the width of this panel, but the problem is that the width is not being overwritten.
What I have tried to do in my css is:
#panel-1026-body {
width: 400px;
}
This does not work, since the width still stays 1819px as auto-created by the panel. How ever, it seems that it is only the width: that it won't accept, if I fx. add a margin-left: 400px; or background-color: red; it works.
Does anyone know what might be the cause of the width not taking effect?
I have provided the info that I think is relevant, but please let me know if you need more info
Thank you
It is because when your set a value in your element like style="left: 0px; top: 0px; width: 1819px; height: 29px;", it will be prioritary on the CSS.
Rapid solution :
#panel-1026-body {
width: 400px !important;
}
But it's a very bad pratice to use !important
Cool solution
Try to remove all the style of your element and put it into a CSS class. After, put your CSS code, who will be prioritary on the code before.
inline-styles have greater specificity so with normally you can't override that. You need to use !important:
#panel-1026-body {
width: 400px !important;
}
And yes margin-left or background-color works as these are not defined in that inline-style.
Changing a complex component dimensions (panel, grid, tree, etc.) with CSS is generally not a good idea in Ext. The dimension you see in the DOM, in your case 1819px can also be set on some children of the panel depending on layout.
Thus, you would need to use css that addresses main container div plus all necessary children. Such solution is very vulnerable because the DOM structure can (and it does) change with Ext upgrades - sometimes even minor upgrades may introduce a change of DOM.
You should always set dimensions programmatically calling panel.setWidth(), panel.setHeight(), panel.setSize() or similar. Ext then takes care about itself and sets the width to all DOM elements it needs.
As all suggested in this topic, the solution was to add:
width: 400px !important;
This solved my problem. Gratitude to all that helped
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
On my Website Homepage I inserted a grey strip container containing social network links. I want it to go all the way to the edges of the page like my footer.
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
margin-left: -178px;
padding-right: 349px;
position: relative;
}
I know it's an amateur attempt, can someone show me a better way to code this? At the moment when zooming out it detaches from the edges of the page.
Will need to see the html also
Maybe try taking away the margin if that div isn't contained by another one
I'm looking at your site, and I'm not so sure the problem is with the CSS that you've printed out for us.
Your social networks strip is inside a section tag with class ".wrapper" which is set to width 1640px, and the strip is adjusting to the width of that wrapper. Is there a reason you've set that ".wrapper" class so wide?
Your footer, on the other hand, is not inside that same "section.wrapper" element, so it is adjusting to the width of the browser.
I need help in fixing my right sidebar in Wordpress so that it doesn't move around when seen in different resolution sizes on the screen?
CSS for the right sidebar
#socialsidebar {
float: right;
position: relative;
overflow: hidden;
margin-right: 200px;
margin-top: 200px;
height: auto;
width: 194px;
}
CSS for the container/page
body {
min-width: 960px;
}
.container_12 {
background: #fdfdfd;
margin-left: auto;
margin-right: auto;
width: 960px;
}
You need to learn about position property of CSS.
there are few thumb rules that you have to take care of.
avoid unnecessary horizontal scroll.
try not to give static height, cause you always have infinite height at your disposal. use height:auto for your bigger containers.
give static dimensions to such containers which you know can be accommodated on most of the resolutions.
avoid inline css - try to define generic css as much as possible.
decide the possible resolution range of your app usage. and then begin writing CSS.
and most importantly, always cross verify your CSS(as you write it) on IE(biggest challenge).
most of the time, best way to go about it is that it should be simple and easily modifiable.
see you need to look at the entire screen as a co-ordinate system whose origin is at top-left corner and Y-Axis downwards.
this is one of the best articles on CSS-Position property. Go through it. It will help you in understanding how left,right,top,bottom work.
now, I've made a super simple sample, covering your needs. i.e. right navigation and it stays stable in any resolution.
Sample-fiddle
what you should notice in this sample is, extensive usage of percentage for width, height, top, left. and position attribute.
you can modify it accordingly. or take a reference from it. one more thing, you don't need to do position:absolute, I am doing it cause, i wanted to provide dimension to the container through its top, left,right bottom attribute, you can do it through percentage and position:relative.