Hello

One option would be to create a module position for each of the 3 blocks of text and then adding your texxt using a 'Custom HTML' module. To do so may I suggest the following tutorial which details how to create module positions in the header area of your template... http://www.joomla51.com/tutorials/item/creating-a-new-module-position-in-the-header-area-of-your-template

Note that you will be giving each module position a unique div and position name (eg. replace 'newmodule' with 'telephone', 'email' and 'slogan').

Ciarán

Apologies for the delay in replying. Thank you. That worked!

I have one problem now though, the logo and slogan do not display correctly on an iPad mini.

I disabled the three new modules for mobile phones, in the custom css, but would like to keep the slogan, at least, for the ipad. I have been playing around with the Custom Css to see if I could fix it but I have run out of options, and don't know if there may be a bit of code I need to add to make this display correctly?

I have attached a screen grab.


The logo is quartered and the slogan pushed down across the slideshow. I need to get the logo back at the correct size at the top with the slogan centred underneath, in the Ipad mini display.

It works fine on a mobile as three new modules are disabled for smaller screens, but I really would like it to work on the iPad Mini.

Please can you advise what I can do to rectify this?

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán

Thank you Heather

I have edited your Custom CSS slightly which I hope will amend this issue.

Ciarán

Thank you. I'm really sorry, I do appreciate your help, however this has removed the top left header email module on all versions of the site and the issue with the logo still remains on the iPad mini.

I need to get that module back, and still resolve the view issue on the iPad. Sorry about this.

I have put the module back, but I am still at a loss as how to resolve the ipad view issue? The site was displaying fine on an ipad with the logo in the correct place before I added the three custom header modules. Could it be that the settings for each of these needs altering? I only changed the bits that decided where they should be displayed in the header and left the other fields blank or as they were, as I wasn't sure what to change them to? Could this be the problem?

HI Heather

Testing your site on a iPad mini your logo no longer appears to be loading as in your screenshot. It appears to be now showing coorectly in fact although your email and phone number modules are overlapping slightly. Is this the issue?

Ciarán

Hi Ciarán,

On my ipad mini (I cleared the cache before viewing), in portrait, the problem still persists and the site looks exactly like the screenshot. In landscape, the email is overlapping and the slogan is pushed a little to the left. Am unsure why this is happening?

I've disabled the slogan, the email and the telephone modules for the ipad mini screen as I need to find a solution to this and that seemed the quickest way out. The odd thing is only a quarter of the logo is displaying, just like my screen shot.
Am thinking, if I can resolve that, the rest might work again fine. Do you think that might be it?
Only happens on the ipad mini screen in portrait. Works on phones and everything else.
It's just I can't tell my client it is supposed to be like that as am not sure they will be happy with me. :lol:

Think I have found the issue!
In the Responsive Custom CSS the h1.logo a {background-size: 300px auto;}} was set to over 700px. I reduced the size to 300px and now the logo is back where it should be. Phew!

I have left the other modules disabled for a screen of that size as they don't look right when I put them back, so will leave as is. Thank you for all your help trying to fix this. I really appreciate it. Thanks again, I can imagine seeing my name pop up again and again on the forum must be driving you nuts! :laugh:

That's great Heather and thank you for the update.

We're always glad to try and help so if you have any further queries please don't hesitate to out up a post

Ciarán

Thanks again. Well.... there was one thing...... :blush:

Is there a line of custom .css I can use for the ipad in landscape mode to stop the slogan module being pushed to the left? On the main Mac it is positioned centrally, but on the ipad it sits slightly to the left. I have disabled it for other devices/views.

Or do I need to alter the custom code for that particular module position itself to display centrally on all devices? Am not sure what settings I can alter in the custom .css to make it appear central on everything?

Hi Heather

To alter the position of your slogan on iPad (landscape), try adding the following to the Custom CSS field of your templates parameters..

@media only screen and (max-width: 1024px) {

#slogan {

    right: 275px;

}}

You may wish to edit the 257px to your own taste however to the naked eye 275 appears centered.

Ciarán

Hi Ciarán,

Thank you, I added this but for some reason the slogan is stubbornly staying put! I played around with it a bit, but it seems to be stuck in place. I was wondering whether the logo position or something else is affecting its position?

It's not the end of the world, as everything else is fine. It's just bugging me every time I look at it! :laugh:

Strange... may adding !important might do the trick??....

@media only screen and (max-width: 1024px) {

#slogan {

    right: 275px !important;

}}

Ciarán

GENIUS!! That worked! Brilliant, thank you again for all your help and support. Great service.