thegunner thegunner - 9 months ago 27
CSS Question

Responsive html not responding when put in smaller container

I have some HTML, and the size looks fine when viewing in desktop mode and also shrinks appropriately when viewed on a mobile screen, as I would expect.

I went to also place this HTML in a smaller container(col-md-6), but I notice that it appears as 100% screen width, I would have thought that it would have shrunk, i.e. responsive would have kicked in and displayed as if in mobile view.

Is there anything that can be done to force it to display in smaller mobile view on the desktop in a certain container rather than resizing the screen?

Thanks

Answer Source

Replace the width on your viewport tag with 'device-width'. Then bootstrap will work as advertised. Like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">