Make logo.png responsive

[vcarceler]

Plone 5.2 with default theme Barceloneta does not have a responsive logo.png.

Just surrounding the logo with

makes it responsive but you may find a better solution.

<div id="content-core">
   <img src="https://elpuig.xeill.net/logo.png" alt="Plone site" title="Plone site" /></a>
</div>

[draunger]

Assign me I will do this task

[gforcada]

@draunger there's no need to assign it, craft the Pull Request and then it will be linked to this issue 👍🏾

[draunger]

@gforcada are you referring to the main logo of plone website that must be change with https://elpuig.xeill.net/logo.png this image ??

[draunger]

@vcarceler are you referring to the main logo of plone website that must be change with https://elpuig.xeill.net/logo.png this image ??

[draunger]

@gforcada @vcarceler please reply

[vcarceler]

The Barceloneta theme, when generating the HTML that references logo.png, does not do so in a responsive manner. This creates issues when accessing the website from a mobile device.

The generated code should be something like what is indicated in the issue. Nesting the <img> tag within the <div id="content-core"> is sufficient to ensure that the image is responsive, but the Barceloneta theme does not do this by default.

[MrTango]

this idea does not make sense at all.
The logo is in the header and has to stay there.
To make the logo responsive is one line of CSS.
No need to move things around in templates.
In content-core it only works because, we have the CSS applied there.
So maybe look at it, understand how is works and try to come up with a small peace of CSS (SCSS).

[yurj]

logo is already responsive, because of this rule:

img, picture {
  max-width: 100%;
  height: auto;

introduced with new scales in Plone 6.0.

IMHO, this is a bug, this rule should be applied only to content-core or text section. Barceloneta can do this instead:

#plone-logo img, picture {
  max-width: 100%;
  height: auto;

to make the logo responsive (it is the .img-fluid bootstrap class https://getbootstrap.com/docs/5.3/content/images/).