Responsive border around page

[focused_Gemstone157F]

Hello, just to let you know, this is my first attempt at making an existing (older) site Responsive!

It was designed to look as close as the monthly newsletters that are emailed and mailed out to the subscribers, hence it would be nice to keep the border in place.

Here is the url:  Education Law - Reporter Elementary & Secondary

Thanks in advance!  I am certain I will have more questions along the way as I learn how to get this project done!

D

[Jon Fritz · Accepted solution]

The border is just a coloration of the outside edges of your <div id="container"> tag.

Once you make that container responsive by giving it a % or vw width in the css (there's a bit more to "responsive" than just that, but it's the first step), the border will move along with it.

You have a bigger issue in your image map. Standard html image maps are not responsive. The coordinates that make up the edges of the "hot spots" correspond to fixed coordinates that do not change as the image changes size (when using a max-width setting for responsive images in your css for example). You can however make responsive image maps with javascript (jQuery) and there are a few free sites out there with the code you would need to do that.

[Nancy OShea]

See CSS Border properties.   Use % widths on containers.

CSS Borders

Responsive Image Maps with bitmap and SVG

the new code – Create A Responsive Imagemap With SVG

Nancy