Tagged: header, logo, responsive
Hi
The Enfold theme is awesome.
The only challenge I’ve got with it is that the logo isn’t responsive when the browser window is narrowed. Full screen on a PC and the logo is fine. On an iPhone or other smartphone, the logo is cropped on the right hand side, leaving only the left hand half visible.
When, you scroll down the page, the logo / header shrinks in size which is perfect. However, the logo doesn’t shrink in size when the browser window is made narrower.
My website is: http://www.triggerbell.com
Any help much appreciated!
Thanks
Hi, have you tried to set your logo width to “width=100%” instead of “width=auto”?
Thanks Alkaithil.
Would you mind pointing me to the file that I’ll need to update for this?
Thanks again
S
Hey!
Because you are using an image size that is larger than the default supported size (explained in the text next to where you upload and set the logo in the theme options) it needs a bit of extra css.
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
.responsive .logo img {
width: 100% !important;
}
That may do the trick without anything else but I’ve not tested it cross browser or with past versions of anything.
Cheers!
Devin
Genius! Works a treat. Thanks very much for the help Devin. Works in Chrome and I’ll test in other browsers too