3 column banner

  • Resolved soulluciani01

    (@soulluciani01)


    9 years, 8 months ago

    I have a banner that I seperated into three columns. On the left, a video; Center is text, and the right is a button. When I size my screen down all of the components maintain their position and get smaller. I would like them to reposition themselves one under the other instead.

    If anyone would help me discover the solution I would be grateful.

    Here is the code I am using for the columns:
    <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&#8221; frameborder=”0″ allowfullscreen></iframe></div>

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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>
    Thread Starter soulluciani01

    (@soulluciani01)

    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>
    Thread Starter soulluciani01

    (@soulluciani01)

    i figured it out.. with some help of course.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘3 column banner’ is closed to new replies.