By Subcitizen on

Hey There, thanks for looking at my post. I recently imported the Bootstrap 3 theme into my site. The only problem with the theme is that it doesn't allow the logo image to be responsive. This is not good. I hope there is an easy solution. I've looked around for a couple of days but can't find an easy solution (like a missed box not checked).

One note, under Settings (for the theme) it has a section for making images responsive. I have the box next to it clicked. My thinking is that this does not affect the logo image, but all the other images on the site as they seem to be responsive.

I have seen some answers that involve changing your CSS. But, they don't really tell you how to do that or where to make the changes. In your answer, please be gentle. I'm not a coder or developer, just a user.

Thanks so much,

Jason

⋅ Categories: Drupal 8.x

Comments

onejam’s picture

onejam commented

Which theme are you using? it is this: https://www.drupal.org/project/bootstrap

It could be that a fixed width applied to your logo image in css class property? So if you remove the width or change it to max-width:100% that should make it responsive.

I'm guessing the css class targeting your logo image is something like: .site-branding__logo img { }? but i could be wrong without knowing what the markup is.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Subcitizen’s picture

Subcitizen commented

Yes, that's the theme. I found a solution, I think. The person put this in their CSS file.

.logo img {
height: auto;
max-width: 90%; /* this could be 100% but for me it goes outside the header background at tablet */
}

But, my question is, which CSS file, and where in the file?

onejam’s picture

onejam commented

Look into /themes/{your theme name folder}/assets/ directory. That is where your css files will be located.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Subcitizen’s picture

Subcitizen commented

Thanks for your help, bpixel! I got it figured out. I needed to create a sub theme using these directions:

http://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/su...

Then I added this code to my style.css file:

.logo img {
height: auto;
max-width: 90%; /* this could be 100% but for me it goes outside the header background at tablet */
}

and it works!!

Thanks again, bpixel!