You could use CSS media queries to achieve that, an example:
<style type="text/css" media="all">
@media screen and (max-width: 700px) {
.divison * { display: block; }
}
@media screen and (min-width: 700px) {
.divison * { display: inline; }
}
</style>
<div class="divison">
<iframe width="300" height="183" src="https://www.youtube.com/embed/T_y0Gmsfqro" frameborder="0" allowfullscreen=""></iframe>
<p>some text here</p>
<button>Go for it!</button>
</div>
It almost works but I loose the positioning. For 700px and above the content blocks should maintain their position in a horizontal line.
For 700px and below the content blocks should reposition in a vertical line.
Here is the code I am using in the widget.
<div style="width:30%;position:relative;padding:0px; 10px 0 0;float:left;">
<iframe width="300" height="183" src="https://www.youtube.com/embed/T_y0Gmsfqro" frameborder="0" allowfullscreen></iframe></div>
</div>
<div style="width:40%;position:relative;padding-left:40px; 10px 0 0; text-align:left; float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style="width:30%;position:relative;padding:0 10px 0 0;float:right;">
<button>Go for it!</button>
</div>
Any other suggestions?
Hi there!
Sorry, is this what you want? I am bad at tuts..
<style type="text/css" media="all">
.contents span {
display: block;
}
@media screen and (max-width: 700px) {
.ytvideo,
.contents,
.button {
display: block!important;
}
}
</style>
<div style="display: inline-block;" class="ytvideo">
<iframe width="300" height="183" src="https://www.youtube.com/embed/T_y0Gmsfqro" frameborder="0"
allowfullscreen=""></iframe>
</div>
<div style="display: inline-block;vertical-align: top;max-width: 45%;" class="contents">
<span>Your content for your column #2</span>
<span>Your content for your column #2</span>
<span>Your content for your column #2</span>
</div>
<div style="display: inline-block;" class="button">
<button>Go for it!</button>
</div>
i figured it out.. with some help of course.
