无法在HTML中添加徽标

Question

i am editing an html template, the logo dimensions of the template is lower than my logo, i added my logo to the template but its not displaying,

 @media (max-width: 673px) { #logo { margin-left: 20px; } } #header #logo h1 { font-size: 34px; margin: 0; padding: 0; line-height: 1; font-weight: 700; letter-spacing: 3px; } #header #logo h1 a, #header #logo h1 a:hover { color: #fff; padding-left: 10px; border-left: 4px solid #7c32ff; } #header #logo img { padding: 0; margin: 0; } @media (max-width: 768px) { #header #logo h1 { font-size: 28px; } #header #logo img { max-height: 40px; } } 

 <section class="header-top"> <div class="container box_1170"> <div class="row align-items-center justify-content-between"> <div class="col-lg-6 col-md-6 col-sm-6"> <a href="index.html" class="logo"> <img src="img/long_logo.png" alt=""> </a> </div> <div class="col-lg-6 col-md-6 col-sm-6 search-trigger"> <a href="#" class="search"> <i class="lnr lnr-magnifier" id="search"></i></a> </a> </div> </div> </div> </section> 

my logo dimesnions are 500px*280 i just want to add my logo somehow, is there any way.how can i fix it?

Answer 1

In your CSS styles, you are using id selector, but the HTML template has more of classes.

Also make sure the picture you want to include in the template is within the img/ folder

Answer 2

You're using classes and calling IDs on your .css

Did you try creating a <div> with a class and adding your logo inside the div ? This way you could manipulate the div dimensions and the logo itself until it fits.

A simple example :.

CSS :

.logo {
    background-image: url("img/long_logo.png");
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

BODY :

<section class="header-top">
    <div class="container box_1170">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="index.html">
                        <div class="logo"></div>
                </a>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 search-trigger">
                <a href="#" class="search">
                        <i class="lnr lnr-magnifier" id="search"></i></a>
                </a>
            </div>
        </div>
    </div>
</section>

Answer 3

You are using the wrong CSS Selectors.

For example, if you have assigned a class to your HTML elements like as follows:

<div class="header">
</div>

You should be using "." to apply CSS to it as follows:

.header {}

Whereas "#" is used to select HTML elements with corresponding ID like so:

HTML:

<div id="header">
</div>

CSS:

#header{}

Tip - a HTML element can have multiple classes but only one ID.