How to avoid SVG Logo resize on small screen?

[rudy]

Hello,

I have a SVG logo that I would like to have the same size on all screens. When using mobile, the svg logo automatically resizes and becomes too small.

I noticed that the same behaviour doesnt happen on the demo:
https://experthive.hivepress.io/

I am using SVG logo dimensions 230 x 40 px wich I believe it is fine for mobile also.

Is there a way to make svg logo stop resizing? This doesnt happen for tablet size, only mobile.

Thanks

[Seegon]

Svgs are mathematically generated Vector graphics. The initial size of the image isnt as important, more so what you set the width to.

If you dont want it to change, use a fixed

.class-name-for-logo {
Width: 150px;
Height: auto;
}

Or if you want it dynamic you can do something like this:

.class-name-for-logo {
Max-width: 150px;
Min-width: 100px
Height: auto;
}

[rudy]

Hi @Seegon thank you!

From a non technical person point of view, is it enought to just copy and paste the code bellow on the aditional css ?

.class-name-for-logo {
Width: 150px;
Height: auto;
}

or must I first add more code that links this to my logo svg? Thank you

[Seegon]

Right Click on your logo, Click inspect. Try to find the element containing your logo, and see what class it has. Class=“something”

Then the class name is .something with the dot

[rudy]

Thank you @Seegon! it is solved!