How to have a banner overflow containing div in a responsive template?

[jmks60]

I have a page layout that is 960px wide , responsive, with 12 columns.

The viewport gets filled completely with a pattern image and a gradient, then the main content is inserted on a white background (that’s the 960 max-width) so far, so good.
Now I have a colored strip that is 980 that is supposed to sit near the top of the page, but there is other content like search box, social icons higher up on the page.
The “extra” 20 px of the strip is supposed to extend over the white 960px main content div to create somewhat of a 3-d effect.
The 980 strip is not a solid color, its got a logo and some other artwork plus a horizontal gradient.
The problem I am having is figuring out the right CSS to position the strip so that 10px on both the right and the left side overflow/extend outside the main content/white area
If I remove the class=”col12″ from the strip

<

div> the main container gets larger instead of just the strip

<

div>
I’ve achieved some visual success on the desktop version with things like negative right and left margins, but then the strip is no longer responsive…it winds up outside the flow of the rest of the page.
Creating a separate top containing element followed by the strip then a main containing element has occured to me but then the strip is no longer responsive
I have seen this technique with strips that seem to “wrap” around the main content but I can’t find any articles on the web that explain how to do this technique. Can anyone point me to a place that would describe how to do this?
Thanks in advance, I have been in “CSS hell” for day s over this !

[Paulie_D]

Could you make a reduced example in Codepen.io(?)….but the thing is to think outside the box…literally.

Why does the wider ‘strip’need to be inside the layout container…the answer is…it doesn’t (unless I’m missing something).

Just close the container div…add in your strip div…and open another container div.

The container divs are just ordinary divs with a set width which is controlled by a class…there’s nothing that says you can’t have more than one.

http://codepen.io/anon/pen/dApCb

[jmks60]

Thanks Paulie
Here is the example in code pen. Its not exactly as it is on the website, and I’m not sure what I’m leaving out, but its close enough that with a little guidance, I think I’ll be able to figure out the rest.
http://codepen.io/jmks60/pen/CrAvw
Did I mention this has to be responsive?

on a related topic, there is a large ~ 940px image under neath all this banner junk, that gets larger at certain smaller screen sizes…what would cause that? (it should get smaller I tried adding that code to the example above, but things just got too messy. Thanks so much, appreciate the help.

[Paulie_D]

There’s a lot of extra cruft in the Codepen…try reducing it to just the basic problem.

If you can’t link your own images, use an dummy image from lorempixel.com.

Responsiveness means not using fixed pixel values, try using percentages and max-widths instead.

[jmks60]

I don’t think I know enough about what I am doing wrong to remove anything that’s not related to the problem. I started with a responsive WP theme, (montezuma) so I’m pretty certain
that there aren’t any fixed width / blatantly wrong things in there.
Do you know of an article or post somewhere that addresses
the basics of how to do the type of design that I am trying to accomplish? I’ve searched, but came up dry. I think its because I’m not searching on the right terms,….
Thanks for trying to help me.

[Paulie_D]

Oh…this is WP.

i suspect I’m not going to be of must assistance then as we’re now dealing with altering template files and PHP statements…and I’m no use there.

If I’m right your page template spits out a single container and PHP injects the content…unfortunately, what I suspect you need would be a series of ‘containers’ each with their own content…at least the way I envisage it.

If you have an finished design image of what you are trying to achieve the WP experts might be able to help you where my knowledge ends.

[jmks60]

If you know the CSS, I think you will be tremendous help. The template is amazing in that altering the php and everything is nearly idiot-proof.
I can do that if I get the html and CSS right.

I figured out why you could not see the images in codepen and I think I fixed that…try it now,
http://codepen.io/jmks60/pen/CrAvw

don’t worry about the missing border on the left side of the container, that’s because I forget to make the logo transparent. Those 2 little triangles at each end of the logo ribbon have to bleed out of the container (which is 960px)The body tag has lots of texture, and color, etc, And the image has to get smaller as the viewport shrinks, still with the triangles in the bleed…

To complicate life, the solid ribbon holds a horizontal menu, but so far, I have that in place and it almost behaves itself when viewport shrinks.

And thanks for your persistence, it is truly appreciated.

[Paulie_D]

Like I said, close the container, have your banner and re-open the container

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

[jmks60]

Thanks Paulie, the bleed is working ok, but the responsive part is broken. The template is based on a 12 col 960 pixel grid,
similar to bootstrap in that classes of “row” and “col1”, “col2”, etc are used. As you told me the bleed works when I close the container and and remove the logo-area from being constrained to the 960px width. However, in doing that, when the page gets narrower, the banner shrinks up to a point, then it reverts back to the 960 px width, bursting way out to the right. Is there a way to constrain the image width to the width of the viewport? Or some other trick that will make this logo responsive and still have the bleed on the left and the right?

[Paulie_D]

The answer to your question(s) is…”There is/are” but that’s a much longer conversation and not one I, frankly, have sufficient spare time to go into here.

A reasonable Google search will give you multiple techniques for responsive & / or adaptive design.

[Author]

Posts