I’ve been ‘toying’ with this for a number of days but I cannot figure out how to get the “Print” button on my page to resize [AND stay in place] with its parent element when the webpage is shrunk to a smaller viewport.
As always, any help is greatly appreciated.
Hi @randyrie,
I’m not sure if that is your final header or not. Might have some troubles adapting it to be responsive.
At any point, buttons in Bootstrap can be made responsive by placing them inside a div (that is responsive) and then adding the .btn-block class. This makes the button take up the full width of the div. As the div resizes, so will the size (width) of the button. No real way to shrink the height. Absolute positioning - like you are doing now- can get REAL fiddly.
Personally, I would partially abandon Bootstrap for this and use CSS grid. You can specify that the banner takes up the whole width and the button only a fraction just inside the right side. I guess you could also do it by using the banner as a background image and the button floated right in a partial width row. I just hate absolute positioning for a lot of things.
Cheers,
Bob