CODEWITHSUNDEEP
javascripthtmlcss
user10627755
user10627755

Reputation:

not able to add logo in html

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?

Upvotes: 0

Views: 214

Answers (3)

hiranya
hiranya

Reputation: 42

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.

Upvotes: 0

mattdaspy
mattdaspy

Reputation: 882

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>

Upvotes: 1

Prosper Opara
Prosper Opara

Reputation: 31

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

Upvotes: 0

Related Questions