Recent
Categories
View Replies (13)

Boss - Responsive Options

0
Votes
Undo
  1. mesquite
    mesquite
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 21 January 2015
  5.  Subscribe via email
Hi Ciarán
Could you please take a look at: http://www.alecsrestaurant.co.uk
I've got the responsive options ON for the homepage and OFF for the other pages at the moment.
Is there a way I can get the main graphic on each page to resize when using responsive option to view correctly?
You'll see that most of the graphic on the homepage is cut off.

Your help will be much appreciated

Regards
Terry
Responses (13)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Terry

The background uses the 'background-size:cover' property which can act differently to what you may expect on some mobile devices. You could try adding the following to the Custom CSS field of your templates parameters which will disable this property on mobile devices..


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

#container_header,

#container_top2_modules,

#container_bottom1_modules,

#container_bottom2_modules {

  background-position: 50% 50%;

  -webkit-background-size: auto !important;

  -moz-background-size: auto !important;

  -o-background-size: auto !important;

  background-size: auto !important;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
mesquite
mesquite
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán
Can you just confirm you received my reply with Login details?

Regards
Terry
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Terry

Could I ask you to resend your details. Note that email replies to forum posts are removed by the system automatically :/

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. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

We have added the following to each of your 'Responsive Options' custom CSS and it is now working as intended...


#container_header,

#container_top2_modules,

#container_bottom1_modules,

#container_bottom2_modules {

  background-position: 50% 50% !important;

  -webkit-background-size: auto !important;

  -moz-background-size: auto !important;

  -o-background-size: auto !important;

  background-size: auto !important;

}


This leaves your background image displaying as is without any resizing. Presuming I understand you correctly pages will always be cropped on different screen sizes as all devices will have different ratio screens.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
mesquite
mesquite
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán
The background graphic remains too large on phone and IPad.
It needs to be at least 50% less.
If you go to Gallery and click on the thumbnails, when enlarged this is the size for IPad and of course even smaller for mobiles.
Is this possible?

Regards
Terry
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Terry

Using the same Responsive Options custom CSS fields you could use something like the following which will resize you image to 50% (edit to taste)...


#container_header,

#container_top2_modules,

#container_bottom1_modules,

#container_bottom2_modules {

    background-size: 50% auto !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Note the 50% can be replaced with pixel size if you so choose (400px).

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
mesquite
mesquite
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán
I thought it was okay but just viewed the website on IPAD & a 7" screen tablet and the top graphic is duplicated on each page??????
Can you assist with this.

Regards
Terry
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Please ensure your device is not loading anything from cache. We have checked on a number of devices and are unable to replicate any issues.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
mesquite
mesquite
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán
I asked somebody to put up the website for the very first time on their 7" tablet and the graphics had 'doubled up' so this could not have been a cache issue?

Regards
Terry
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Terry

It is really hard to know what may have caused this without been able to replicate the issue. Your site markup has just one instance of this graphic so I can not see how is possible to be displayed twice.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 11
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Terry

One possibility is that the background image is just repeating? As the background-size is no longer set to 'cover' it will repeat if it is not big enough to fill the screen? To amend you could simply try increasing the background image size.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
It would be best to resize to actual images rather than using CSS to resize them.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


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

Site Links

Recommended

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.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok