Brandon Zhang

I’m closing this topic as we will not implement this for now.

Hello @ravindra107

Thanks for reviewing, but I’m developing locally though, and it’s also behind a login, so I’m afraid not URL can be provided at the moment.

I see. What do I need to do in my local environment to match yours so I can help debug a bit further?

Hi there, not sure, but something might be off with the offset, I just checked some of my codes, maybe this will help you debug. Following LIMIT, you’ll need to add OFFSET I think, but I didn’t fully read your logic, so I might be wrong.

// From my codes:
// Calculate the offset.
$offset = ( $paged - 1 ) * $posts_per_page;

// Adding limit clause.
$query .= " LIMIT $posts_per_page OFFSET $offset";

• This reply was modified 2 months ago by Brandon Zhang. Reason: Add a comment

I believe you already have your custom css added, now you just need to add comments to make it clear to your future self, then the easiest way is the search for the ID in browser developer tools.

If I understand you correctly, then here’s how to do it.

• Go go the page where it has your IDs.
• Press Command + Option + I ( Ctrl + Alt + I if you’re on windows ) to open the developer tools.
• Go the Elements tab.
• And press Command + F or (Ctrl + F for windows) and search for the IDs you’re looking for.

Another approach would be to crop this image https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg, removing the extra space on the left to make the width more align with the actual image so you can use flexbox on section#block-4 to align the heading and the image itself, so the heading won’t overlay with the image on specific viewports.

And you can add back the yellow background and top-left/top-right border radius to that section to make it look like before.

• This reply was modified 12 months ago by Brandon Zhang.
• This reply was modified 12 months ago by Brandon Zhang.

Please note that mine solution is not good as I’m using :has() selector which does not have full browser support at current stage. https://caniuse.com/css-has

But in case there is no better solutions (meaning after other developers take a closer look at this) and given that you’re able to add custom CSS, there is the solution I come up with.

If this is the style you’re looking for, then you can add following CSS to your site. https://imgpanda.com/upload/ib/c7FTEQUze7

/* Make the container that has iframe full width. */
.container:has(iframe) {
    max-width: 100%;
    padding-inline: 0;
}

/* Cancel the top margin on this row that has iframe inside of it. */
.container > .row:has(iframe) {
    margin-top: 0;
}