Logo Placement and Sizing - Template Accounting

Website Templates
#1

Please how to add a picture with a company logo to place it in front of the text COMPANY NAME? The original template code is:

< div class=“container”>

—> here place the company logo <----

< a class=“navbar-brand” href=“index.html”>COMPANY< br>NAME< /a>

< form action="#" class=“searchform order-sm-start order-lg-last”>

if I add the picture as shown below it doesn’t work because (i) the space between the logo and the text COMPANY NAME is too big and (ii) the image won’t probably resize to adjust itself to the screen size:

< div class=“container”>

< a href=“index.html”>< img src=“images/logo.jpeg” alt=“Image” width=“70” height="70"class=“img-fluid”>< /a>

< a class=“navbar-brand” href=“index.html”>COMPANY
NAME< /a>

< form action="#" class=“searchform order-sm-start order-lg-last”>

Can anyone suggest a smart way how to add this logo in front of the COMPANY NAME?

I would like to use the logo picture and keep the company name in text. However if you recommend to replace the both with one picture containing logo and text I could live with it. Just the picture would need to resize properly on different screen sizes.

Thanks a lot for help.

P.

#2

Hey there

You need to use img tag of HTML to add an image of your logo: https://www.w3schools.com/tags/tag_img.asp

this tag can be placed anywhere on withing other tags,

Please note, when working with HTML at lease beginner experience is a must

#3

Hello, I’m familiar with html. However this is more about bootstrap and css defined somewhere in the package. Images are automatically resized, they float, spacing is via classes… So it’s not so simple as simple html tags. Your help would be really appreciated. Taking in account that 99% of businesses use some sort of logo the solution developed by you could be implemented into your templates. Businesses would for sure appreciated it. Thank you. P.

#4

Hi

Yes, but you still can use img tag with custom CSS class and style it after, its not about bootstrap or existing css rules :slight_smile:

let me check it, please provide link to the website

#5

Hello, please look at the page URBAN ACCOUNTANTS LTD into which I inserted an element < img> as suggested in my text above. On the large screen of PC (using Chrome or Edge) things look good, the logo (black square) is just on the left side of the screen and the text / company name URBAN Accountants is sticking to it (is also on the left). But when you look at the same page via iPhone screen (using Chrome or Safari) there is a significant gap between the logo (black square) and the text / company name URBAN Accountants. The logo is on the left side of the screen but the text on the right side of the screen. Please, how to get rid of that space in between? Both should align to the left and there shouldn’t be a space in between. The name of the company moved to the righ side of the screen instead of sticking to the company logo on the left side. It looks like floating is not working as it should. If you check another page without the logo you will see that the company name is originally on the left edge of the screen. Thank you. Paul

https://urbanaccountants.com/services.html

This is what I added just before the element containing the company name:

< a href=“index.html”>< img src=“images/logo.jpeg” alt=“Image” width=“70” height="70"class=“img-fluid”>< /a>

And this is the original element of the template to which I’m trying to stick the logo to.

< a class=“navbar-brand” href=“index.html”>COMPANY
NAME< /a>

#6

Hi there

Well, that normal, since you added a new element it will require styling, the easiest thing, in this case, is to merge this text to your logo into one image, so, you will have only one logo with the text and logo :slight_smile:

#7

Please any idea how to force the following element to keep the text aligned left?

< a class=“navbar-brand” href=“index.html”>COMPANY
NAME< /a>

The attribute style=“text-align:center;” doesn’t work as it’s probably overridden by the CSS class definition.

#8

HI there

I see the text is already on the left side, check this out: Screenshot by Lightshot

#9

That’s true. So the text alignment is correctly set as left. However if you look at the same page using a small phone screen you can see that there is a big space between the logo and the company name. I think that the screen is split to 2 columns into which the elements (picture and name) are placed because it looks like the company name is exactly in the middle of the screen. That’s creating that space. How to change this behavior to make the company name to stick to the logo picture? It might be necessary to add some properties / attribute to the picture element to avoid this extra spacing on small screens. Thank you. Paul

#10

hi Paul

What about merging your logo and this text into one image? you have your logo as an image and as a text, only with CSS you cant stick them without changes, why bother so much when you simply can create one image with the logo and text?

If you still want to go with the text, in this case, you have to wrap your logo and this text into one div, then it will be easier to hold them together

let me know results