grid css broken

[DandyClubs]

Description

use stylus

#wrapper {
    max-width: 1600px;
    position: relative;
}

#content {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}


#sidebar-border {
	position: absolute;
	left: 82%;
    top: 5px;
}

div#content div.post {
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 500px;
}

.autopagerize_page_separator,
.autopagerize_page_info,
div.wp-pagenavi,
div.post.sticky,
div.category-max,
.post:not(.hentry),
.page-title{
    grid-column: 1/-1
}

infy scroll is append css

grid-template-columns: 316.25px 316.25px 316.25px !important;

size is random px per site

so ignored grid-template-columns: repeat(4, 1fr);

i try ignore grid-template-columns: 316.25px 316.25px 316.25px !important;

요소 {
	/* grid-template-columns: 316.25px 316.25px 316.25px !important; */
}

all post grid broekn.

URL

[Redacted]

Version

8

Browser

firefox edge

OS

windows 11

Device

PC

Adherence

• I have read the Sticky and my issue is directly related to the app and is not related to making it work with a specific website (including how to make images load)

[sixcious]

Hi DandyClubs, thank you for opening this issue! 💜

Sorry, but I had to edit your post and redact your URL because NSFW URLs are not allowed.

This is actually intentional. When a site uses a CSS Grid template for its page element and Infy has to append a page divider inside the template, a change has to be made to keep the divider from breaking the grid because the divider isn't a regular column and needs to take up the full width. When Infy modifies the grid template, it uses the same template pixel values returned from the Window.getComputedStyle() method. I know that this causes the grid to use static pixel values, which isn't ideal if the screen is later resized, but the tradeoff of having a divider and grid that are compatible in the majority of cases is worth it.

If you don't like it making that change, here are a couple of solutions for you:

1. Define a Page Element Path that is one level higher up in the DOM tree so that the page divider is placed outside the CSS grid. For example, instead of a path like #container > .page-elements > * use #container > .page-elements.
2. Save the URL with no page divider by adding "pageDivider": "no" to the JSON Save Object (OPTIONS > SAVES).

use stylus
...

Overriding the styles like that might not work because I use inline styles that are hardened with important, so I would recommend writing a custom script that overrides the styling using the CSSStyleDeclaration.setProperty() method.

Do one of these solutions work for you?

[DandyClubs]

{
  "id": 13,
  "name": "TEST",
  "url": "^https://TEST\\.TEST/",
  "type": "regex",
  "action": "next",
  "nextLinkType": "xpath",
  "pageElementType": "xpath",
  "append": "element",
  "duplicateStop": true,
  "pageDivider": "no",
  "nextLink": "//ul[@class='page-numbers']/li[./span[@class='current']]/following-sibling::li[1]/a",
  "pageElement": "id('blog-entries')"
}

I try

but apply database rules

can't apply my saved rule

[sixcious]

I'm not sure which URL you are trying to make that work with, but that save will only check for URLs that start with https://TEST.TEST in them so you'll want to modify the url's regular expression. If you are trying to create a save that will activate on multiple URLs (i.e. a generic URL pattern), you can use a regular expression like ^https://.*. You can also just give it the same regular expression as the Database URL that is overriding your save; Infy always prioritizes saved URLs over database URLs so long as the saved URL actually matches the URL and the settings are correct (in your case, double check that the nextLink and pageElement are correct).

[sixcious]

OK, I did some more testing and I was able to find a website where the grid modification I'm doing actually does break the grid. I only tested the grid modification on Pixiv and a few other websites where it was successful, and so I thought it would work for every website and thus turned it on by default. What I'm going to do is to make the grid modification an optional setting, and it won't be on by default. That should resolve your issue.

Thank you for bringing this to my attention!