1. Louw
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 07 April 2015
  5.  Subscribe via email
I hope you can assist. I have a problem that my background image does not display correctly on mobile devices and I thought it would be best to disable the Header Full Screen on tablets and phones.

Would it be possible to do this based on screen size and what would the CSS look like



Really appreciate your help with this.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Louw

Sorry to say this option is not available as this area of the template is controlled via PHP rather than CSS.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks.

Would it maybe be possible to resize the background image when viewed on a tablet or phone? Or maybe show a different background image?

http://marketingsolutions.capetown/
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Louw

Thank you Magnus

Try adding the following to for example the 'Phone (Portrait) Custom CSS' field in the 'Responsive Options' tab of your templates...


.touch #header_bg {
background-size: auto 600px !important;
}


Depending on your taste you may wish to edit this further where 600px is the height of your image. Always ensure the height exceeds the height of the device you are setting.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for helping with this. Unfortunately nothing changed when I inserted the code when viewed on a tablet or phone.

Would you be able to log in and check if I did it correctly?
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Sure. Details can be sent to info@joomla51.com. Please paste a link to this post in your email for our reference.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Louw

I have updated your template to the latest download which has improved how your background is viewed on mobile devices. Let me know if this is a suitable solution.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for helping out. Unfortunately the background image did not display correctly as the icons remained cut off on small screens. I added the following code in the responsive options section to make the header size smaller on mobile devices:

#header_bg {
height: 25% !important;
}

It moves the rest of the site up on certain screen sizes(hiding the background). Do you see any possible problem with the code or with this solutions?

Thanks again.
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
That seems perfect. I cant imagine any possible issues.

Good work... I had never even considered that option :). Thank you for sharing!

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Awesome! Thanks for looking into this and for the great service as always
  1. more than a month ago
  2. Commercial Templates
  3. # 9
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.