I have a <div> like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="slider.html"></iframe>
</div>
But when I decrease the screen size to small or medium, I will get white-space beneath the <div>.
Like This:
How can I have a dynamic height for this <div> to avoid the white-space?
You need using javascript to discover the dynamic height.
We have some functions in this links:
make iframe height dynamic based on content inside- JQUERY/Javascript
and call when the browser resize.
use media query like and add it to custom css
this is just a sample
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
Related
I need to change the image 1 to image 2 in a wordpress theme on mobile size.
the image is inline in the theme, so I can't replace it with background image and use media queries to get this done.
From:
<a class="logo">
<img src="image1.jpg">
</a>
Change to:
<a class="logo">
<img src="image2.jpg">
</a>
Any way I can do this?
I prefer CSS
You can use the following -
.logo {
content:url("image2.jpg");
}
Using breakpoints (depends on what CSS processor you are using like Stylus, SASS)
#media only screen and (min-width: 600px) {
.logo{
content:url("image2.jpg");
}
}
#media only screen and (min-width: 768px) {
.logo{
content:url("image2.jpg");
}
}
I am using bootstrap, but the question is relevant to any responsive framework
I have a responsive page that looks (in a simplistic way) like this
<div class="wrap">
<div class="row page">
<div class="col-xs-12 col-md-6">
some stuff
</div>
<div class="col-xs-12 col-md-6">
some other stuff
</div>
</div>
</div>
I want to use this layout but to have the scope of the responsiveness be on some parent div (.wrap in this case) and not on the window, meaning if the parent div is at same specific sizes, force the responsive breakpoints to be in effect.
So this way, I can place this 'template' anywhere in the page and the results will be different according the wrap size and not on the screen/window size
Is there a way to do this? Or am I in outer space?
I think there is now way to check for the containers div width (using CSS), but yes you can try checking for the browser size and add/remove some class width which can give similar results.
#media (max-width: 768px){
.wrap{
width:1170px
}
}
#media (min-width: 767px){
.wrap{
width:767px
}
}
Or even better, you can use jQuery. var $widthOfWrap = $('.wrap').width()
How to fluid images when resize window?.
I have HTML code like this :
<div class="box">
<img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>
And CSS :
.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}
When windows is resized, I want remove properties of (.box img): top:-10px; left:-10px and attribute more : min-width:100%, max-width:100%. It means we have :
.box img{
position:absolute;
width:180px; height:80px; min-width:100%;
top:(removed); left:(removed)}
How can I do it with Javascript or Jquery. Thanks for your help.
I tend to agree with #Phorden that media queries are a good route for this.
However, if you need to do it with JS / jQuery:
$(window).resize(function() {
$('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});
I don't know about a jQuery or Javascript solution, but if you want a pure CSS solution, CSS media Queries is probably what you want. It is a foundational concept of responsive web design. More info on CSS Media Queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
add max-width:100% and height:auto to your images to make them resize proportional based on their parent:
.box img{
position:absolute;
top:-10px;
left:-10px
max-width: 100%; /* fits width of parent */
height: auto; /* resize height based on max-width, making it proportional *?
}
.
I think this script by Scott Jehl could be interesting for you although the images only change there dimensions at specific breakpoints.
picturefill
It's very useful as you can define different picture sources for various resolutions.
The markup needed in combination with this script looks e.g. like this:
<span data-picture data-alt="Image description">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="Image description">
</noscript>
</span>
I'm new to the Foundation Framework and just started using it. I'm creating a responsive design using Foundation Grid.
I've created desktop layout Grid with 2x4 (rows, column) grid.
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<!-- End Thumbnails -->
</div>
</div>
Now, I want is two columns layout for Tablet, and 1 column layout for Mobile. By default grid resizes columns to fill the empty space but I want columns of fixed-size.
one solution I can think of is updating the DOM hierarchy based on #media queries using javascript. But I want a better solution, if possible using CSS.
Any help will be appreciated.
If you're using Foundation 4.3+, you can download an additional stylesheet that enables a medium grid in addition to the small and large ones that you're currently using. While this feature is technically listed as experimental, it's set to become standard with the release of Foundation 5 on November 21st.
Using the #media and certain screen widths (in pixels), you can specify max and min widths so the div will remain fluid, but not go off screen or go smaller than you allow.
You will need to specify widths for most common devices...
eg.
#media screen and (max-width: 980px) {
#your id {max-width:99%; min-width:75%;}
.image class {width:975px; height:450px;}
}
#media screen and (max-width: 650px) {
#your id {max-width:99%; min-width:75%;}
.image class {width:648px; height:290px;}
}
#media screen and (max-width: 480px) {
and so on...
}
#media screen and (max-width: 320px) {
and so on...
}
media screen and (max-width: 240px) {
and lastly...
}
I am designing an app that works on the desktop, tablets and phones.
I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.
I have other responsive elements working correctly, but the following html & CSS are not working:
HTML
<div id="storagePage" data-role="page" data-theme="a">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
<h2>Header 1</h2>
<p>Content here</p>
</div>
</div>
CSS
#media all{
.storage_devices {data-inset: "true";}
}
#media (max-device-width: 520px) and (orientation:portrait) {
.storage_devices {data-inset: "false";}
}
I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.
Thanks
I have used
#media all and (max-width: 650px) {
.storage_devices {data-inset: "false"}
}
You can change the width, then add the orientation to fit your needs.