Paul Paul - 2 months ago 15
Jade Question

bootstrap column gets enlarged by an image

I have a

row
containing some
col-md
. In the last column I have an image and when rendering the website on an mobile phone, the last column gets enlarged by the image and displaced into a new row.

normal rendering

phone rendering

jade:

div.row#contact
div.col-md-3
div.col-md-2
div.col-md-1
div.col-md-1
div.col-md-1
div.col-md-1
div.col-md-3
img(src = "./images/wko_logo.svg", alt = "wko logo")


scss:

img {
max-width: 100%;
height: auto;
}

Answer

Bootstrap's grid system uses sm columns until the container width drops below 768px, as defined in https://getbootstrap.com/css/#grid-options. When it drops below that width, it'll give each .col-sm-* div 100% width. Give your html elements a behaviour for an xs container width, and your problem is solved.

A working example can be found at https://jsfiddle.net/fqxg3L9p/.