Add some style in table on mobile device version

Hi John,

I've checked the page you've linked but I wasn't able to find the table there.

While I saw a table(1 after TOC), it looked different from the screenshots you've provided as it didn't have another table after it and the buttons didn't have overflow scroll.

Perhaps you've sorted this out already? Let us know. :D

Hey Elvin,

Couldn't sort completely.

tried to add margin bottom after yellow border. But can't. https://prnt.sc/26fg8xf

Yes, the table is under Toc and Our Top Picks subheadings.

I mean it for mobile devices. Not destop.

Thanks

I see,

I believe you're aiming for something like this?
https://share.getcloudapp.com/OAu4g8Bg

If yes, try this CSS:

@media (max-width:650px){
    table.mtr-table.mtr-thead-th {
        border: none;
    }
    .ep_product_table tr {
        margin-bottom: 40px;
        border-top: 1px solid rgba(0,0,0,.1) !important;
        border-left: 1px solid rgba(0,0,0,.1) !important;
    }
}

Awesome!

Thanks, Elvin,

One additional thing I want to do.

Add some margin/padding in Check price button because right now seems buttons are too close in the yellow bottom border.

https://prnt.sc/26fhnvs

Margin won't work so we can resort to paddings.

Try adding this one on the @media rule we just did.

td[data-mtr-content="Action"] > .mtr-cell-content {
    padding: 20px;
}

Adjust the padding to your preference. :)

Solved!

Thank you so much Elvin

No problem. :D