x-index overflow in mobile view

[afzalsayed96]

The x index is scroll-able in mobile view. Need to fix this!

[rhyneav]

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

[TotomInc]

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

[afzalsayed96]

We missed this...

[afzalsayed96]

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

The padding is the problem

[afzalsayed96]

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;
    }

[rhyneav]

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

[TotomInc]

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

[afzalsayed96]

@rhyneav Yes it's needed

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

[rhyneav]

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.

[afzalsayed96]

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

[afzalsayed96]

Is anyone assigned to this issue?

[rhyneav]

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

[afzalsayed96]

I'm on it

[rhyneav]

You rock, thank you @afzalsayed96!