Sébastien Bouchard
Forum Replies Created
-
It seems this bug only arises when you try to create a Grid inside a Stack:
Page > Stack > Grid
Change this stack into a group and then there is no more trouble with the grid..!Ooops, I tested on another website and it all works fine. I will need to investigate a bit more…
Hi Yann,
Yes, I managed to create what I wanted. I opted for a different approach. My SVG image is now a background image for a group that encompasses the entire footer, so there can’t be any unwanted gaps.
I am using the Safe SVG extension to be allowed to include such SVG images.
No, I did not use a custom HTML block. I could try that later.
Sorry if this isn’t clear. I would have liked to include a screenshot, but it’s too complicated for a lazy person like me…
Forum: Fixing WordPress
In reply to: Where is custom global CSS in twentytwentyfive?@brentrambo Did you read it all ? Did you read my 3 last posts from 2 weeks ago ? Just scroll up or click here. That’s an update, tested on WordPress 6.8.1.
Forum: Fixing WordPress
In reply to: Where is custom global CSS in twentytwentyfive?@tonyzeoli You could also just go to:
- Appearance > Editor (site editor)
- Open command palette (Ctrl+K) 🔍
- Search for “Customize CSS”
Forum: Fixing WordPress
In reply to: Where is custom global CSS in twentytwentyfive?NOTE: You can also add custom CSS to specific blocks. That’s not so hard to find. But that’s another story.
Forum: Fixing WordPress
In reply to: Where is custom global CSS in twentytwentyfive?@tonyzeoli I was on WordPress 6.7.x. Things have changed since then.
On WordPress 6.8.1 running Twenty Twenty-Five theme, click:
- Appearance > Editor (site editor)
- Page > Open any page
- Click on the styles icon (◐)
- Styles > More (⋮) > Additional CSS (check my screenshot)
P.S.: Once you started adding this global additional CSS and saved it, it won’t be so hard to find… You could then just go: Appearance > Editor (site editor) > Styles…
My custom temporary fix was to add the following code as additional CSS in the Twenty-Twenty-Five theme:
.wp-block-navigation.tw-nav-active-thick-border li.current-menu-item > a, .wp-block-navigation.tw-nav-hover-thick-border li a:hover {text-decoration-thickness:2px !important;}That’s just a copy-paste from Twentig’s code with “!important” added at the end.
The problem comes from wp-content/themes/twentytwentyfive/style.css @ lines 21-24:
a {
text-decoration-thickness: 1px !important;
text-underline-offset: .1em;
}Forum: Fixing WordPress
In reply to: Where is custom global CSS in twentytwentyfive?On Twenty-Twenty-Five theme:
- Appearance > Editor (site editor)
- Styles > Edit styles (pencil icon)
- Click on Styles menu icon (⋮) > Additional CSS
There you can set custom CSS for the whole site.
Tested OK on Firefox and Chromium.
Thanks ! Merci !
Updated status: NOT RESOLVED !
I got a reply from Emilio Cobos Álvarez (:emilio) on my bug report:
This is expected given how fractional pixel scales work?
(…)
At some DPIs, your viewport size could be
1023.3333px, which causes what you’re seeing. We (and all browsers nowadays) support@mediaexpressions that don’t suffer from this, e.g. your example could be:@media (width < 768px) { .tw-sm-hidden { display:none !important; } } @media (width >= 768px) and (width < 1024px) { .tw-md-hidden { display:none !important; } } @media (width >= 1024px) { .tw-lg-hidden { display:none !important; } }Which would always work.
I tested this and can confirm this seems to solve the problem ! Please check my bug report to get the full story.
I made this bug report to Mozilla and Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1940617
I can now confirm the problem comes from Firefox (version 133.0.3 (64-bit), Snap for Ubuntu).
In order to isolate the problem from any outside interference, I did this simple test:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@media (max-width: 767px) {
.tw-sm-hidden {
display:none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.tw-md-hidden {
display:none !important;
}
}
@media (min-width: 1024px) {
.tw-lg-hidden {
display:none !important;
}
}
</style>
</head>
<body>
<h3>3 pictures sizes, one for each: desktop, tablet, mobile</h3>
<img src="https://picsum.photos/id/26/900/600" alt="" width="900" height="600" class="tw-sm-hidden tw-md-hidden">
<img src="https://picsum.photos/id/26/600/400" alt="" width="600" height="400" class="tw-sm-hidden tw-lg-hidden">
<img src="https://picsum.photos/id/26/300/200" alt="" width="300" height="200" class="tw-md-hidden tw-lg-hidden">
</body>
</html>It works fine in my Chromium browser, but not in Firefox, where all 3 pictures are displayed when the media width is at 1024px. I should make a bug report to Firefox…
Sorry, I still don’t have much time for this, as I am still in the early design process… But I am curious…
After a bit more investigation, I find the problem only occurs with Firefox (version 133.0.3 (64-bit), Snap for Ubuntu).