Min Width Issue:

[jayg-7]

Hi,

I’m not sure how to accomplish this on he following website, due to how nested div’s are handled.

On the following page we have divs dividing the page down the middle with different background colors and text colors for design purposes. But throughout the site the max width is set to 1140px. Right now on very large screens the text in those divs are going out further than that.

I need the background to extend the full width but need the text to extend no further than 1140px. I’m not sure how to do this.

Thank you!

http://stewartmartin.studioissa.com/workshops/

[ThatCat]

You could make an image of exactly how you want the containers?

[shaneisme]

It’s a little messy in there…

I’m not sure if this will help you, but I made this simple example so you can mess with it and learn how to set it up (potentially).

http://codepen.io/drainpip/pen/tsJfE

[nixnerd]

Here’s the deal:

Looks like you only have a max-width of 1140px on the actual elements… like h2, h6, p, etc. The problem is… you need to set the CONTAINER to a max-width of 1140px. See, right now, no single text element is wider than 1140px. So, the rule isn’t being enforced. Looks like the container you need to look at is called .site-inner. It’s got a max-width of 100%. Change that to 1140px.

Now, this might screw up your background tiles, as I don’t know what’s going on with them. But… the idea is that they are OUTSIDE the container (in the markup) and the text elements are INSIDE the container.

[jayg-7]

Thanks everyone!

@Rocanrol97 heres a sketch: https://www.evernote.com/shard/s3/sh/f2f6fb65-0c25-4cf9-9b68-8479ae672c48/60d566d4bdcc696c28a04ab63285fcb4 Thank you! I hope this clarifies it.

@NIX I get the part about the site innner being 1140px, but we have an image in the middle of the page we want full width, going all the way to the edges. If I did that we couldn’t have that image in the middle going all the way to the edges.

I hope my sketch makes it cleared. Basically we want the page divided down the middle, separating two text boxes through out the page. But the total width of both text boxes together shouldn’t exceed 1140. But we still want two different bg colors no matter how large the screen gets, for moniters much wider than 1140, like the giant apple desktops.

[Paulie_D]

Or just have full width ‘layers’ with an inner div set to the required width.

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

[nixnerd]

Or just have full width ‘layers’ with an inner div set to the required width.

Right. Just what Paulie said or put your full-width photo outside the wrapper in the markup. Nothing wrong with that. You can structure it in a variety of ways that all work.

What I generally do is have a wrapper that is a class and makes no assumptions about what’s in it. Therefore… I can wrap what I want and NOT WRAP what I don’t. That’s just one approach and I don’t always use it but it works well most of the time.

[Author]

Posts