I have created the following codepen that illustrates the problem I am having.
On Windows 10 it works fine in Edge and Chrome but in Firefox if you start with the browser as narrow as possible and gradually expand the width you will notice that just after the 600px breakpoint and just after the 992px breakpoint the divs containing the logo and the text overlap.
I am using the most recent versions of each browser.
Does anyone have any idea why this is so and what I can do to fix it?
I apologise if my code is rambling and difficult to follow. Also, some of the CSS refers to other pages but I left it in in case it is part of the problem.
Browsers always look at the html attributes of the image before they css the css and if present can compute the size properly even if resized later with css.
As @Archibald said above applying padding to an image is a bit weird anyway and you would be better
off with padding on the container or margins on the image.
It also looks like the issue could be fixed if you added box-sizing:content:box to the image. Im guessing that the 1fr grid size is computed on the image’s size but the padding on the image is being added to the image’s width which the browser has now mis-calculated.
There have always been problems with browsers trying to work out the width of containers where the width of the container is dependent on the width of its content whose content is also based on the width of its parent (browsers hate circular references). The spec says that in these cases the layout is undefined.
None of which answers the problem explicitly so I would guess that Firefox’s behaviour is buggy but not unexpected.
Well I just cheated and pasted the image into the browser and read the height and width it gave me. It will have the correct aspect ratio but I assumed you knew the intrinsic width and height of the svg you created
Ah, I see. So it’s the aspect ratio that is significant?
I created the SVG in Illustrator and the artboard has a height and width in pixels but I didn’t think that meant anything in terms of web, apart from the aspect ratio? Sorry if I have missed something here?