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
- mesquite
- Commercial Templates
- Wednesday, 21 January 2015
- Subscribe via email
It would be best to resize to actual images rather than using CSS to resize them.
Ciarán
Ciarán
- more than a month ago
- Commercial Templates
- # 1
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
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
- more than a month ago
- Commercial Templates
- # 2
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
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
- more than a month ago
- Commercial Templates
- # 3
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
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
- more than a month ago
- Commercial Templates
- # 4
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
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
- more than a month ago
- Commercial Templates
- # 5
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
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
- more than a month ago
- Commercial Templates
- # 6
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)...
Ciarán
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
- more than a month ago
- Commercial Templates
- # 8
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
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
- more than a month ago
- Commercial Templates
- # 9
Thank you
We have added the following to each of your 'Responsive Options' custom CSS and it is now working as intended...
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
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
- more than a month ago
- Commercial Templates
- # 10
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
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
- more than a month ago
- Commercial Templates
- # 11
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..
Ciarán
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
- more than a month ago
- Commercial Templates
- # 13
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »