Twitter widget width not working - javascript

I have tried everything using css that i can think of , and set with in the embed , but i cant not get it to width more then 500px
https://jsfiddle.net/9d73rhvj/
<a class="twitter-timeline" data-widget-id="694535126655635456" href="https://twitter.com/TwitterDev" width="1300" height="750">Tweets by #PTDcommish</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
CSS i've tried
#twitter-widget-0 {
width: 100% !important;
}
.twitter-timeline-rendered {
width: 100% !important;
}
iframe[id^='twitter-widget-']{
width:100%;
}
.twitter-timeline {
width: 100% !important;
}

Twitter has set a maximum width for embedded timelines to 520px, which my guess is as why your solutions aren't working.
From their docs (link):
Dimensions
An embedded timeline list template automatically adjusts to
the width of its parent element with a minimum width of 180 pixels and
a maximum width of 520 pixels.

Related

Product Image Container Size not fitting the image aspect ratio

I have a css issue where the product image containe for images, both portrait and landscape, with different heights does not adapt to fit the height of the actual image. The container height is based on the tallest image. See attached.
I have used the the following css on the container, but cant get adjust theigh height (shown in light blue)
Thanks
#image-23714742567097-0 {
width: 925px !important;
max-height: 550px;
object-fit: contain;
overflow: hidden;
}

Have the same height with autoWidth enabled OwlCarousel

I want to show a little gallery in my website, but the images are not responsive with the AUTOWIDTH CODE, and they don't have the same height.
I create a JS Fiddle so I can explain my self better.
https://jsfiddle.net/w6axkqmz/1/
I tried using this CSS
.gallery .owl-carousel .owl-stage {
display: flex !important;
}
.gallery .owl-carousel .owl-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
But leave the rectangular images as a square.
Do not set height:50vh it is going to set the height of every image to 50% of browser's viewport's height. But without setting the height, object-fit is not going to work. Set height as 100% so that it will be of the same height of gallery.
Relative JSFiddle https://jsfiddle.net/2psgqb3v/
The reason you need width and height set is because for browser needs to fit the image/object to that height. If you don't specify that, then browser will take image's height/width to render.
The solution is to have media query to set the width and height of the images.
Relative fiddle https://jsfiddle.net/74rok0yg/

Image size issue using Angularjs and ionic

I'm trying to make that 1 image take 50% height and 100% width of the screen and the second picture to the same.
Look at the picture below:
http://imgur.com/f4iJ2k6
You should be able to accomplish this using css.
body{
width: 100%;
height: 100%
}
img{
width: 100%
height: 50%
}
Note that, for some reason, you have to set the body to 100% width and height

CSS - max-height doesn't work for printing image

I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;

Stretching a background image vertically not in scale, not just cover - Can this be accomplished?

EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/

Categories

Resources