Logo banner using the Global Headers and Footers mods

Started by lavoip, September 04, 2019, 07:18:26 PM

Previous topic - Next topic

lavoip

I don't know where to post this.

How can we set the size of an image while using smaller screen like smartphone or tablet?

We use this:

<center><img src="https://cj3apage.com/Logo/3A3BBanner1000.svg" alt="3A3BLogo" align="center" ismap usemap="#Logo"/></center>
<map name="Logo">
  <area shape="rect" coords="0,0,188,250" alt="The CJ3A Page" href="https://www.cj3apage.com/">
  <area shape="rect" coords="808,0,1000,250" alt="CJ3B.info" href="https://cj3b.info/">
</map>


The logo is showing fine on big screen but not on smartphone.

Is it because we are not doing right with the html or does our svg file is not set properly?

Mick.

Try something like this..


<img class="img-logo" src="https://cj3apage.com/Logo/3A3BBanner1000.svg" alt="The CJ3A Page"/>


Add this to your theme's css file..

img {
max-width: 100%;
}

.img-logo {
width: 1000px;
height: 250px;
margin: 0 auto;
display: block;
}

lavoip


Mick.


lavoip

It look like it work but only if the image is in the head part.

Doesn't work if it is in the global header part or the footer.

So it will be in the head part.

Thank

Advertisement: