Width of banner and text on mobile devices

[coolemail2]

We have Presence Builder 11.5.13

I have created an example http://complete-communications.com/. The issue we have is what it looks like on an iphone. On an iPhone you have a Banner module on top (along with the website name and slogan are too long to be displayed). The lower one is just a text/image module on all pages.

The text/image module fits fine but:

• it is slightly narrower than the banner module;
• we cannot put a logo etc on text/image module unless we create a separate image for that.

Is there a way that the banner module can be made to fit or is this simply re-submitting bugs that have been reported before?

 

[coolemail2]

Can anybody help? Please?

 

[coolemail2]

PLEASE can one of the forum Gurus help on this? It might be only to say that there is nothing we can do until we are using Plesk 12.

 

[dave-ha]

Hello coolemail2,

Greetings across the channel.

it is slightly narrower than the banner module;

That's caused by the standard padding of the text/image module in your header. The same is with the search module. You can overcome it by adding the following code to the meta field in the settings:

<style type="text/css">
<!--

/* fixing the width of the modules in the header */
#layout-header .widget-text,
#layout-header .widget-search {
    padding-left: 0;
    padding-right: 0;
}

-->
</style>

we cannot put a logo etc on text/image module unless we create a separate image for that.

I am not sure if I understand your issue correctly but if you want the logo to appear on top of the other image in the background try to:
a) add it to the text/image module and postion it by CSS - or -
b) put the logo into a text/image module and add the background image to this text/image module by CSS

Was that helpful?

 

[coolemail2]

Greetings across the channel.
Was that helpful?

Greetings dave-ha. Thank you for responding and yes, your answer is, as always, very helpful.

You can overcome it by adding the following code to the meta field in the settings:

That looks much better, thank you.

I am not sure if I understand your issue correctly but if you want the logo to appear on top of the other image in the background try to:
a) add it to the text/image module and postion it by CSS - or -
b) put the logo into a text/image module and add the background image to this text/image module by CSS

I like the simplicity of the "Banner" module (able to include/exclude logo, website name and slogan). But if you look at it on the test domain above on an iphone, you only see part of the banner image and you miss some of the text used on the 'website name' and 'slogan'. Therefore, for professionalism, it appears that the only way to get it looking right is to use text/image module and not the Banner module.

Is it easy to add a logo or background image by CSS?

And do you know if we can add a text/image module and have the whole module's background colour something specific to that one module?

Thank you, as ever, for your help and advice.

 

[dave-ha]

But if you look at it on the test domain above on an iphone, you only see part of the banner image and you miss some of the text used on the 'website name' and 'slogan'.

Yes, that should be improved. @ Parallels: Could you please take it up and fix it?

(...) it appears that the only way to get it looking right is to use text/image module and not the Banner module.

Is it easy to add a logo or background image by CSS?

Yes, it would be easy indeed (but mind the alternative further below).

And do you know if we can add a text/image module and have the whole module's background colour something specific to that one module?

Yes, you can. Every text/image module has a unique identifier which can be refered to in CSS. The text/image module in the header of your test site has the id widget-64ba4c2a-1f5a-f4ce-382d-424d1b2b43d2, so your CSS code could read:

#widget-64ba4c2a-1f5a-f4ce-382d-424d1b2b43d2 {
    background: url('/extras/images/banner.jpg');
}

Or if it's the only text/images module in the header:

#layout-header .widget-text {
    background: url('/extras/images/banner.jpg');
}

Alternatively, you could use the nice features of the banner module and tweak it with a little CSS to make sizes and content fit. Try something like this:

<style type="text/css">
<!--

.mobile-view .header-logo {
    position: initial;
    max-width: 100%;
}

.mobile-view .header-logo img {
    max-width: 100%;
}

.mobile-view .header-title {
    position: initial;
    max-width: 100%;
    white-space: normal; 
}

.mobile-view .header-subtitle {
    position: initial;
    max-width: 100%;
    white-space: normal; 
}

-->
</style>

The above CSS code makes the logo image, title, slogan and banner image fully visible and appear one after the other. As you can see, due to its dimensions the banner image only allows for little content, especially in portrait direction on a small screen. Try to play around with the CSS code to position, rearrange or hide header elements and improve the look of the site. Just drop me a line if you need more help.