Отзывчивый холст с Bootstrap

Question

Я пытаюсь решить эту проблему. У меня уже есть несколько холстов (работающих как слои) внутри столбца начальной загрузки. На данный момент он работает правильно на компьютерах, но я хочу сделать холст отзывчивым для мобильных телефонов.

Моя колонка это:

<div class="col-md-8 my-container2"> 

    <div> 
    <div id="fileName"> Upload a fragments file 
     <button id="infoPopover" type="button" class="btn btn-warning btn-xs btn-padding" data-container="body" data-toggle="popover" data-placement="right" data-content="Not file loaded" data-html="true"> 
     ? 
     </button> 
    </div> 
    </div> 

    <!-- ---------- CANVAS -------------------- --> 
    <div id="canvasContainer" class="col-centered"> 
    <canvas id="myCanvasGrid" width="600" height="550"></canvas> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 
    <canvas id="myCanvasLayer1" width="500" height="500"></canvas> 
    </div> 

</div> 

и это мой CSS:

#canvasContainer{ 
    width: 600px; 
    height: 550px; 
    margin-bottom: 25px; 
} 

#myCanvas { 
    background-color: transparent; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 2; 
    margin-top: 25px; 
    margin-left: 50px; 
} 

#myCanvasLayer1 { 
    background-color: transparent; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 1; 
    margin-top: 25px; 
    margin-left: 50px; 
} 

#myCanvasGrid { 
    background-color: white ; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 1; 
} 

Я прочитал и попробовать некоторые вещи, как изменить ширину% и так, но это всегда сбой. Вот как это выглядит сейчас:

И вот как это выглядит, если я ставлю некоторые% вместо пикселей:

Я просто хочу знать, что я должен делать в ответ : колонка? холст? потому что если я полагаю, что столбец соответствует 100% x100%, это выглядит как второе изображение, а холст не изменяется.

Заранее спасибо.

Answer 1

Просто добавьте width: 100% в css. Кроме того, как хорошая практика, а не упоминая ширину и высоту рядный, я предложу max-width и max-height в CSS

#myCanvas { 
    background-color: transparent; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 2; 
    margin-top: 25px; 
    margin-left: 50px; 
    width: 100%; 
} 

#myCanvasLayer1 { 
    background-color: transparent; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 1; 
    margin-top: 25px; 
    margin-left: 50px; 
    width: 100%; 
} 

#myCanvasGrid { 
    background-color: white ; 
    border:1px solid #000000; 
    position: absolute; 
    z-index: 1; 
    width: 100%; 
}