logo appearing twice in header on smaller devices

Forum Moderators: not2easy

Message Too Old, No Replies

logo appearing twice in header on smaller devices

tyankee

11:27 pm on Jul 3, 2021 (gmt 0)

not sure why but on smaller devices (tablets, phones) my logo <snip> appears to partially show up twice. the second occurance is to the right of the actual logo and seems to be cut off (only partially appearing).

[edited by: not2easy at 11:47 pm (utc) on Jul 3, 2021]
[edit reason] Please see ToS [webmasterworld.com] [/edit]

not2easy

11:52 pm on Jul 3, 2021 (gmt 0)

Sorry, no reviews to find the cause of problems. Just explain the structures involved and we can figure where this belongs. Is it a WordPress site? Static HTML? Is it your own .css? It sounds like a theme issue but more details will help.

tyankee

3:56 am on Jul 4, 2021 (gmt 0)

yes it is a wordpress site using the Brooklyn theme. I think the logo's might be too large. They are in svg format.

lucy24

4:28 am on Jul 4, 2021 (gmt 0)

Conceptually, it sounds like this:

Something in the site code tells the page to display {suchandsuch} when the viewport drops below a certain width. But the code forrgot to tell the page not to display {otherthing} when this condition is met. So instead of "either A or B" it's doing "both A and B".

Look at any and all @media rules containing the element "max-width" or "min-width". Also look for anything involving "background-image".

The .svg format ought to be a red herring, because that only affects scaling; it's what .svg was created for. If the same thing is displaying twice, something else is going on.

not2easy

11:58 am on Jul 4, 2021 (gmt 0)

I agree with lucy24 and I've seen that happen in WP theme CSS which is what came to mind when I first read it. I suggest to look at the css and source code for all mentions of the logo.svg to find the cause and if you do not find it there, look in the functions.php file to see if it adds 'logo.svg'.