Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WP&woocommerce CSS img sizes clash in footer

I have two images in my footer.php, they are hard coded and shall stay that way:

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" height="30"> is an  
<a href="https://www.#.com" target="_blank" ><img src="<?php bloginfo('template_directory')?>/img/logob.png" height="30">

on the woocommerce pages, for some reason, these two logos show really big(original size). It seems, inspection it, that my 30px are being overwritten by woocommerce.css:

.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;

}

I have tried to change this in my custom.css to get my small images back to:

.woocommerce img, .woocommerce-page img {
height: 30px;
max-width: 100%;

}

But this causes all images on the page to shrink, any idea how I can tell my custom.css to keep the images zsizes int he footer ANYWHERE on the page?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I added a .smallfooter class to the image in footer.php, now it is working fine on all pages. I had called the class .small before, this was overwritten by the bootstrap css for some reason, hence giving it a new unique class . smallfooter did it!


  2. 0

    It seems there is no class or id to select that image you wanted so I saw you have an attribute in your image tag which is height="30", It can be used as a selector to just select this image, not the others. Here is what you can do to select it:

    .woocommerce img[height=30], .woocommerce-page img[height=30] { height: 30px; max-width: 100%;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search