Make Logo/Image fit/resize in mobile version

HTML & CSS
1

I searched the forum and the web, read guides and threads, but couldn’t make it work…I’m trying to make a logo fit in this template ( https://www.free-css.com/assets/files/free-css-templates/download/page249/dart-agency.zip )

Online web page template is beta1.nfshost.com I try to insert the logo logobla
instead of the text in the upper left corner of the page, I can insert the img code (yeah i’m amateur) in the html and input the right sizes but I need to make it work as the original page works with the text logo.

As you can see when the page is resized or it is visited in smaller screen the menu becomes a button you can click/tap on, and its position is in line with the text logo, how can I place an image logo and obtain the same effect? Basically the image must be resized when seen in smaller screens and probably some code about the menu button should be changed, any help is appreciated!

2

I suggest you upload your image and then we can help with the alignment as the alignment will depend on the image you have chosen and how you want it to behave.

Put the image inside the navbar brand and then add an extra class to the anchor so that the styles can easily be over-riiden.

Roughly like this.

<a class="navbar-brand brand-image" href="#">
    <img src="https://picsum.photos/id/1015/200/50" width="200" height="50" alt="logo">
  </a>

Once in place and when we know the size of the image we can set about seeing the best way to align it based on screen size.

The CSS code will probably require media queries to handle the smaller screen sizes so it would be in your benefit to invest some time in being comfortable with the basics of css and media queries etc.

If you can’t upload the image to your site yet (for some reason) then perhaps link to the image in the thread or attach it at its normal size so we can see what we are dealing with.

3

The image logo will vary but it will always be a one or two words logo roughly 400px in width

here the updated page https://beta1.nfshost.com/

:+1:

4

Here’s a start then but you may need to tweak sizes and margins to get it to your liking.

.header .brand-image {
  width: auto;
  height: auto;
  padding: 0;
  display: block;
}

.header .brand-image img {
  width: 25vw;
  max-width: 300px;
  min-width: 150px;
  height: auto;
  margin-top: -5px;
}
@media screen and (max-width: 767px) {
  .header .brand-image img {
    margin: 12px 0 0;
  }
}

That code needs to be last in source.

If you change the image size then you can tweak the margins on the image to line it up again. Unfortunately as that template is an old floated layout then automatic alignment is not possible.

(Generally with templates (or bootstrap) you would put your custom css in a custom css file and leave the template code unchanged, In that way you can always revert back to the original should something go wrong.):slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.