Archived topic
Minor site edits readjusting overall site layout.
6 replies · Started by Catherine on March 1, 2021
Hi there,
A previous client of mine that I built a site for on GeneratePress contacted me today to let me know that every time they go in to edit a page and click "Preview," the alignment of the page gets messed up and everything defaults to a very strange alignment that seems to ignore grids and containers. You can see an example of this here: https://lincoln.library.on.ca/kids/
I can't see any changes that have been made at a CSS level. We thought at first it might be the "Library bookshelves" plugin that's being used on that page but I checked and it happens on other pages at well that do not display bookshelf sliders.
Do you have any idea what might be causing this?
Thank you,
Catherine
Hi again!
I pulled down a local copy of the site and figured out that it was a reusable block that's used to create a yellow dividing line. I think the SVG code is maybe outdated? Can you please advise on how this SVG code could be adjusted to meet current SVG standards?
<svg width="100%" height="40">
<rect width="100%" height="4" style="fill:#FEDE30;"></rect>
</svg>Thank you!
Hi there,
Not sure if I fully understand.
the alignment of the page gets messed up and everything defaults to a very strange alignment that seems to ignore grids and containers. You can see an example of this here: https://lincoln.library.on.ca/kids/
Have you solved this issue here?
Hi Leo,
No, I have not solved it, I just figured out which block was causing everything to reset. It's a horizontal dividing line SVG that is used throughout the site. It works on a previous local copy of the site that I have on my machine but does not work on the live site. The code is as follows and I am wondering if there is an error with the SVG code that I should correct?
<svg width="100%" height="40">
<rect width="100%" height="4" style="fill:#FEDE30;"></rect>
</svg>I'm not sure unfortunately but that doesn't look like a normal SVG code to me.
It's usually something like this:
<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path> </svg>
That's for the search icon in the theme.
Thanks, Leo. I was able to fix it by converting that block to an <hr> and styling it via CSS instead.
Glad to hear :)
