Menu
Needing help with Bootstrap and plain CSS. Page in question is built within the bootstrap framework and has extra style tags within the page.
page:
The page section of interest: President section, includes the gray bar background, image, name and quote.
Details at >=1200px:
At screens >=1200px the section appears fine.
– The graybar extends beyond the page’s container and takes the full width of the viewport– Image (scales) overlaps and extends vertically over the gray bar equally at top and bottom– President’s name appears underneath the image– Quote appears to the right.
What needs to be done:
This section should behave responsively at tablet sizes and greater. What we see at >=1200px should be the same for tablets. In mobile phone, all the elements should stack, and the gray bar should appear behind the content and extend to surround the content.
See images of what needs to be done for:
– mobile: – tablets and desktop:
Any help or steering to the right direction, appreciated.
Thanks.