DNN7 Making logos resize in Responsive CSS


Author Message
Leon

Posted: 8/7/2013
Quote message 

Another weird one. Testing my website I notice the Company logo does not display when i test it on iphone. Looking at the CSS i cannot see immediately that it is excluded so it must be a case that its not re sizing.

Anyone else experience this and is it possible to make it re size?
 
Elvira
Artisteer Team

Posted: 2/11/2014
Quote message 

Hi,

I'd recommend that you use separate images for different responsive views.
First, you need to reinsert your Header image (logo) as an Imagelink (Header tab - Controls - Imagelink).
Right click on it - Visibility and choose it to be visible only in a desktop view.
Then go to Responsive View at the top right corner of Artisteer, choose one of the views, switch to "Custom Responsive"
and insert an imagelink again.
Scale it as needed, place in a necessary position, right click on it and choose it to be visible only in that specific view.
After that press "Reset to default Responsive", so the header height is adjusted to the image.
You can do the same for other views. You can reinsert all your Header images this way.

Please let me know if this instruction is not clear to you and I'll try to explain it in more detail.
 
Hutch

Posted: 3/6/2014
Quote message 

:-) Thanks for this Elvira. Works like a charm!
 
Nadia

Posted: 5/17/2014
Quote message 

All I can say Elvira is thank you, thank you, thank you. I have been struggling for a while in understanding how to get the responsive layouts to work for a while. Thanks for the awesome response. You rock :)

 
Tom

Posted: 11/17/2015
Quote message 

:-) Thanks this helped me a ton. I was removing header images completely. Now I can put them back in as ImageLinks!
 
Tom Harris

Posted: 11/18/2015
Quote message 

I found that if you create a header but remove everything including the headline and the slogan and then just add your information to the headerpane of the Theme it works great. Just use the following style in your img src. "max-width: 100%; height: auto;" See below

<p style="text-align: center;"><img alt="" src="/portals/0/header.png?ver=2015-11-17-200536-123" style="max-width: 100%; height: auto; text-align: center; vertical-align: top;" /></p>. The header pane will responsively resize to the width of the screen.
 
Tom Harris

Posted: 11/18/2015
Quote message 

Quote Tom Harris:

I found that if you create a header but remove everything including the headline and the slogan and then just add your information (IN AN HTML MODULE) to the headerpane of the Theme it works great. Just use the following style in your img src. "max-width: 100%; height: auto;" See below

<p style="text-align: center;"><img alt="" src="/portals/0/header.png?ver=2015-11-17-200536-123" style="max-width: 100%; height: auto; text-align: center; vertical-align: top;" /></p>. The header pane will responsively resize to the width of the screen.