expanding content with window

Those columns will scale if they are done with percentages, the trick is that the margins between the margins also need to be percentages and it all has to add up to 100% or less. I tested it with Chrome’s inspector with these values and it worked fine:

32% | 2% | 32% | 2% | 32%

But once the browser gets pretty narrow they are quite small and I would use media queries to either switch to them to full width, stacked on top of each other, or just hide them.

That was very helpful thank you. I just started looking into media queries. Looks like something I can wrap my head around. I just need to figure out what style sheet to toss the info in. Thanks. Any good place to you would recommend to get information or a tutorial on this?

it would be nice for the three boxes to drop below one another once it hits a specific width. keeps width of device or screen

You can put these media queries right in your theme’s main style.css file, I would put them at the end of the file so that the main rules are applied first and then the media queries are applied when those widths are hit.

Here’s a good article to start with, and a couple of videos you could check out:
https://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
https://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/

To drop the columns to one column, stacked on top of each other, you’d want a media query something like this:

@media only screen and (max-device-width: 480px) {
.headerpostit div {
float: none;
width: 100%;
margin: 0 0 20px 0;
}
}