9 replies · opened Mar 31, 2021
Header background image doesn't resize correctly on iPad in Firefox and Safari, instead it seems to zoom in. It works correctly in Chrome.
Appreciate any help you can offer.
I am aware the site doesn't use the current version code, but my client doesn't want to pay to have me completely recode all the pages to update to v 6. If there is a workaround or you could let me know what files to update that would be great.
Thanks!
Le
Hello,
Apologies for the Inconveniences caused!
With the Older Versions of Canvas, you can only change the following code according to your needs:
[ch_pre type="css"].video-placeholder { background-size: cover !important; }[/ch_pre]
Other than that you can only change the Height of the Slider on iPads using Media Queries. Example:
[ch_pre type="css"]@media (min-width: 768px) and (max-width: 991.98px) {
.slider-element {
height: 600px !important;
}
}[/ch_pre]
To make the Size of the Slider Area smaller which will make the Background Image fit to the available area.
These are the only solutions available with the Older Versions of Canvas. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you!
Can you tell me where to put this code? Is it something in styles.css that I need to change?
Sorry, I know just enough to be dangerous!
Le
Hello,
Make sure that all the Custom CSS Codes are added in the css/custom.css File: http://docs.semicolonweb.com/docs/getting-started/theme-customization/ .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Well, thanks for your info, but I put the code where you specified and it didn't make any difference.
Any other kind of workaround? Like are there image specifications that will minimize this effect?
Sorry to keep at this, I'm just trying to find a fix that won't cost my client hundreds of bucks in my time.
Thank you again.
Le
Hello,
We have tried checking your Website: https://fullblownvideo.com and could not see the css/custom.css File linked anywhere in the Document . Make sure add this stylesheet in the Document and the custom styles should be applied appropriately.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Again, thank you for your efforts. Sorry about that. But I'm still not seeing any difference.
Please check the aboutUS.html and/or services.html pages. That's where I've added the links to the css/custom.css head section.
I've added the link to the custom css. Here's what's in the links of head section.
headcode.jpg
Here's what's in the custom css file.
custom.css.jpg
Sorry to be so much trouble.
Hello,
The Services and About Pages are using the Page Title Parallax sections which is why the CSS Codes do not work. You will need to identify the classes used in the particular pages and then apply the custom styling accordingly. Previous Styles were provided according to the Homepage.
For these pages, you will need to use the following CSS Codes:
[ch_pre type="css"]#page-title.page-title-parallax {
background-size: contain !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
#page-title.page-title-parallax {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
}[/ch_pre]
Hope this Helps! Any further Customizations to this is you responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .
Let us know if we can help you with anything else or if you find any further issues.
Sorry I was not clear about the pages with the problem, I thought you too were testing on an iPad and knew what I was talking about. This code makes it much better than it was. I appreciate your help. Thank you!
Hello,
You can also change the background-size: contain !important; and add background-position: right center !important; or to any other value according to your needs to place the image accordingly or show a different part of the image. Check this for accepted values: https://www.w3schools.com/cssref/pr_background-position.asp .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard