How to make ribbon’s corners overflow, hidden

[farzadina]

I have a wrapper with 1024px width and a ribbon at the top of it:
See This Image
The ribbon’s corners, made my wrapper wider. Also I don’t want to give my wrapper a less wide. (than 1024px).
I don’t want my ribbon’s corners to make the page scrolling, when the page width reach them.
What’s the solution? (Should I explain my problem more?)

[Paulie_D]

You are going to get scrolling anyway if the user’s viewport is less than 1024px wide since it’s a fixed width.

[farzadina]

@Paulie_D Can you please explain your purpose more?

I want to have scrolling, only if the user’s screen resolution is less than 1024px, not when it’s more than it. Those extra widths will make the page scrolling before reaching 1024px and it will scroll sooner.

[Paulie_D]

So you’re only worried about viewports that are just a little bit more than 1024px. Seems like a minor issue since you are happy with scrolling under than number.

Fair enough, I’d use a media query and have the corners not be visible until the viewport was wider than the width you have assigned (i.e 1024 + 2xExtra.)

That should do it.

[farzadina]

Hmm…That was a really nice solution, thanks.
I used @media (max-width: 1084px){ .ribbon-corner{display:none;}}

[Author]

Posts