CSS to span image to entire width of screen

[judyos]

I’m using the WP text editor to insert an image that will span to the entire width of the screen (see link below). However, when I insert my full-width image (1920×400), it only goes to the text margins.

What CSS should I use to override the default when I go to insert the image into the page so that it will go to the edges of the screen as indicated below?

Please note that the module is already in a standard section whose width is already defined (pagebuilder).

Any help is most appreciated!

[Paulie_D]

We can’t diagnose an image we can only diagnose code.

If the ‘module’ is inside a container with e width less than 100% there is not a lot you can do without changing the HTML.

If you have a ‘container’, close it, have your 100% wide image and open a new container.

You can have more than one container on a page…it’s allowed.

[judyos]

Haha, Paulie. I’m dealing with a constraints of a WP theme and I guess I’m going to have to talk to the developers to find out the proper parameters to close the container on just one page.

Thanks anyway!

[Paulie_D]

If the element is only for styling (image/bg color)..with no actual content then there are other options.

http://codepen.io/Paulie-D/pen/ogMYpm

[Beverleyh]

If you know what the left and right content padding is (e.g. 4em) you could also offset the full-width image with negative left and right margins – something like this: http://fofwebdesign.co.uk/template/_testing/img-margin-override.htm

[Author]

Posts