Search code examples
cssmaterialize

Materialize: Resize logo properly

I'm trying to create a new website design using Materialize.
So far, everything is going fine but one thing:
On the Desktop version, the logo stays perfectly fine, but when we go into responsive view (or just zoom in a lot), the logo doesn't fit properly:

Regular view Responsive view

So my question is how I can fix this issue?
I want the logo to get a little smaller to fit.

here is the CSS that I use at the moment:

.brand-img img {
    padding-left: 5px; /* Fix a little issue of the logo "sticking" to the left side of the screen too much */
    height: 100%;
}

and the HTML line I use (which isn't that spectacular):

<a href="#" class="brand-img img-responsive">
    <img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>

I hope somebody is able to help me :)

Solution

  • try use this for your images :

    position:relative; top:1px; /*adjust this top*/

    this will repositioning your images and fit to your div