x-index overflow in mobile view about papercss HOT 14 CLOSED

Gotcha! Could this also be solved by changing the html from

<div class="container paper">

to

<div class="container">
  <div class="paper">

That way the paper width of 100% is within the container and not overriding it.

I'm just trying to find ways around using !important. This way it's easier for someone using PaperCSS to override the styles if need be.

from papercss.

Ah dang. The culprit is the CDN url. Just a simple overflow-wrap: break-word; style should fix this.

from papercss.

So shouldn't this property be added to a component?

from papercss.

We missed this...

from papercss.

table tbody tr td {
    padding: 8px;
    line-height: 1.5;
    vertical-align: top;
    border-top: 1px dashed #d9d9d8;
}

The padding is the problem

from papercss.

Proposed fix:

• Padding for table tbody tr td must be in percentage
• Adding !important in media query for container width

.container {
    width: 100%;
    max-width: 960px;
    position: relative;
    margin: 0 auto;
    @media @medium-screen {
        width: 85% !important;
    }
    @media @xsmall-screen {
        width: 90% !important;
    }

from papercss.

Good catch with the padding! And is the !important tag needed here?

from papercss.

@rhyneav I think the !important tag override the default width which is set upper.

from papercss.

@rhyneav Yes it's needed

@TotomInc It does override only for the specified screen-size which is actually desired to achieve

from papercss.

Great! Your fix works. I totally forgot about problem with overriding !important 😅

from papercss.

Is anyone assigned to this issue?

from papercss.

Nope! Do you want to take this one @afzalsayed96?

from papercss.

I'm on it

from papercss.

You rock, thank you @afzalsayed96!

from papercss.