css - Resizable containers at the same level -

- 

<div class="row container-row"> <div class="col-md-8 col-xs-12 no-padding-column">     <div class="video-container">         <img class="video-image" src="image.jpg">         <a href="#" class="js-play-video">             <img class="play-image" src="play.png">         </a>     </div> </div> <div class="col-md-4 col-xs-12 no-padding-column">     <div class="text-content">         <h1>superious quality</h1>         <p>sometext</p>     </div> </div> </div>

below style

.panel-container {   color: #fff;   height: auto;   position: relative;   margin: 0px auto; } .panel-container .container-row {   margin: 5%; } .panel-container .container-row .no-padding-column {   padding-right: 0px;   padding-left: 0px; } .panel-container .video-container {   display: block;   position: relative; } .panel-container .video-container .video-image {   width: 100%; } .panel-container .play-image {   position: absolute;   width: 13%;   height: auto;   top: 50%;   left: 57%;   margin-left: -12%;   margin-top: -6%; } .panel-container .text-content {   padding-left: 15px;   padding-right: 15px;   float: left;   height: 381px;   background-color: rgba(0, 0, 0, 0.6);   color: #fff; } @media (max-width: 30em) {   .panel-container .text-content {     height: auto;   } } .panel-container .text-content h1 {   color: #fff; }

i want text-content has same height video-container. please note height of video-container not fixed , defined size of image , it's resizing when browser resize. how can make text-content resizable aligned (height) video-container?

one solution make .container-row , .text-content same background-color. code:

.panel-container {    color: #fff;    margin: 0px auto;  }  .panel-container .container-row {    background: #666666;    margin: 5%;  }  .panel-container .container-row .no-padding-column {    padding-right: 0px;    padding-left: 0px;  }  .panel-container .video-container .video-image {    width: 100%;  }  .panel-container .play-image {    position: absolute;    width: 13%;    height: auto;    top: 50%;    left: 57%;    margin-left: -12%;    margin-top: -6%;  }  .panel-container .text-content {    padding: 0 15px;    float: left;    color: #fff;  }  .panel-container .text-content h1 {    color: #fff;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container-fluid panel-container">    <div class="row container-row">      <div class="col-xs-8 no-padding-column">        <div class="video-container">          <img class="video-image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />          <a href="#" class="js-play-video">            <img class="play-image" src="http://uxrepo.com/static/icon-sets/iconic/svg/play-circle2.svg" />          </a>        </div>      </div>      <div class="col-xs-4 no-padding-column">        <div class="text-content">          <h1>superious quality</h1>            <p>sometext</p>        </div>      </div>    </div>  </div>

i know not right way , doesn't answer question, works on behaviour.


Comments

Post a Comment

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more