CSS tips for wrapping Simple Pages banner to container

Hi @ebell. I was wondering if you could offer any tips for using custom css to resize the following banner to the outer borders of the wrap container. It’s sort of at the limits of my playing with min-width etc, so any advice would be very education for me on my styling journey.

You’ll need to look at the margin and/or padding for the banner and for the outer container. (You probably don’t want to change the container’s padding, as that will have cascading effects on layout.) Use the web inspector to see where that space is coming from and adjust accordingly. With CSS layout, there is rarely a simple/single answer (especially not one that can be derived from a screenshot), so you’ll need to try different approaches until you find the best solution.

Based on the image alone, I would guess that adding a negative margin to the banner would do the trick, e.g.

/* assuming the container has top/left/right padding of 1em */
div#banner{
  width:calc(100% + 2em); /* full width plus the values of both left and right space */
  margin-left: -1em; /* subtract value of left space*/
  margin-right: -1em;  /* subtract value of right space*/
  margin-top: -1em;  /* subtract value of top space*/
}

Again, the web inspector is going to be your best option for understanding how the layout works and which changes are going to work best. If you apply your changes directly in the web inspector panel, you’ll be able to see what changes immediately. Just keep doing that until you get the desired result.

Thanks @ebell. Do you have any reason why it will stretch the image to the top and left margin but the right margin won’t move? It’s a set of img banners inside a div with a link, and they fade in and out using a script controlled from a class. There isn’t anything there that is controlling their size on desktop (I set them to a different size on mobile only).

I can’t answer that in the abstract, especially if there’s JS involved. You’ll need to look at the details of the script, styles, and markup. I would recommend dealing with the CSS positioning/layout before applying any dynamic content.

In the end I realised I had max-width: 100% applied to img and it was carrying over, so I just made a new banner class with max-width: none as well as the margins set and it works a treat and plays well with the script.