Infoway theme: Logo/header shrinks too much in tablet and mobile view

sandyliptenflorida333 · Member · May 10, 2015 at 7:00 pm
Copy link

Add topic to favorites
Hello, folks. Short version: my site’s header, which includes the logo, becomes way too small when viewed on tablet or phone. Is there CSS I can add to change this display?

I just moved our site to the Infoway theme. In the demo, Infoway appeared to resize beautifully. However, the demo used the default header, with just type for the site name. I should have realized that my site would behave differently because I am using a logo header.

There are some other threads in the forum about this issue, but the resolution is not clear, so I’m asking again.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 11, 2015 at 6:49 pm
Copy link
Hi there, my suggestion is to create a new logo image with the bulk of the whitespace to the right of the logo cropped off and then upload that image to your media library. Next, get the URL of that image and replace URL_OF_IMAGE between the quote marks with that URL. Since I don’t have the image to work with at the moment, it might be that some adjustments will have to be made to position and margins or padding, but this should get you started. (do not remove the existing image from the header. The second rule below makes it invisible, and we need it to keep the header image area from collapsing.
```
#headimg {
    background: url('URL_OF_IMAGE') no-repeat scroll left top / contain transparent;
}
#headimg img {
    visibility: hidden;
}
```
sandyliptenflorida333 · Member · May 14, 2015 at 12:42 am
Copy link
Hallelujah! Thank you so much! As you said, I’m needing to fiddle with margins and/or padding, but it takes care of the problem. Bless you, genius! :)
thesacredpath · Member · May 14, 2015 at 6:21 pm
Copy link
Hooray and you are welcome, and thanks. :)

No items found.