-
Posts
-
I’m using a color background with a background image but its not responsive. It doesn’t scale. In i thought it was ok but it is not. Can you take a look at the url down below on a mobile please or scale the browser. The background image will not scale.
I tried .main_color {
background-position: top !important;
}
but that doesn’t solve the problem.
http://goo.gl/YOJRLKThis is a bug in 3.1 and 3.1.1 many have this problem on mobile.
It is only, when you select backgroud image as parallax!I installed the update V3.1.1 and then 3.1.2 and cleared the cache on all the browsers on my HTC m8 and my pc. There is no difference. The background doesn’t scale/isn’t responsive on the pc and phone. Please check out http://goo.gl/YOJRLK on a mobile and on a pc. And the scroll down Arrow is vissable on the Phone but doesn’t respond with colored background in parallax modus.
Hi!
Here’s how i see it on mobile (http://screencast.com/t/sEClm6Q8LG), i think that’s the expected result as the image needs to be scaled so it can fill the container vertically.
Regards,
JosueHi Josue! The screecast url doesn’t work. The problem is in the parallax option. As soon as that option is active in the color background, there is no repsonsiveness at all. With the scroll option active its a bit more responsive but not complete. And with the parallax option the scroll down Arrow doesn’t work on a mobile. And on a pc, there is no scaling whatsoever on the background image when parallax mode is active.
Hi!
Note that the color section background size is set to “cover” (http://www.w3schools.com/cssref/css3_pr_background-size.asp) which means that it will scale the background to be as large as possible to completely cover the background area. It will also cut parts of the image. I think that’s why you’re saying it’s not responsive but it is. You can set the background size to 100% but it will distort the image proportion.
Best regards,
IsmaelHi Ismael!
As soon as parallax is enabled and i test the website http://goo.gl/YOJRLK on a mobile, nothing is scaled. the image stays at 1920 so i can see a little bit of the background. When i test it on Internet Explorer or Firefox or Chrome on a pc and make the window size smaller, the background reacts a little up and down but there is no scaling at all. As soon as i try all the same tests with the scroll option or the fixed option instead of the parallax option, the scaling/responsiveness is (not perfect but) there! Why is there a difference in scaling between these options? Please try a colored background with scrolling or fixed and a page with the parallax option and you will see the difference.
This url is responsive: http://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/. It immediately reacts to the scaling of the page without distortion. This one does not. http://goo.gl/YOJRLK.
And why does the scroll down button doesn’t work on a mobile when parallax is enabled?Hi!
The behavior of the background images in the demo site is the same in your installation. The size of the background image is not proportionate to the mobile device’s screen size so you can’t expect the same output on mobile and desktop view. You can set the Background Image Position to Center Center to capture most part of the images. Or use css media queries to display a different section on mobile devices.
Regards,
IsmaelThe background in this example with parallax option enabled is not responsive: http://goo.gl/YOJRLK. As soon as i change the option from Parallax to fixed or scroll its responsive. I would expect the same output from the color background with Parallax as the output with scroll option and with Fixed option. Long story short:
A) Color background with parallax: not responsive on pc and not responsive on a mobile + scroll down Arrow does not work on a mobile. (this is the problem i’m talking about)
B) Color background with fixed background: responsive and the scroll down arrow works on a mobile. Works nice, no problem here.
C) Color background with scroll background: responsive and the scroll down arrow works on a mobile. Works nice, no problem here.
1. Why is there difference in scaling/responsiveness between A and B+C?
2. Why is the scroll down Arrow not working in parallax mode?Hi!
Alright. When you set the background to fixed or scroll, the background is directly applied to the section’s container so the background resize properly, proportionate to the color section size. If it is set to parallax it creates another container inside the section called av-parallax. This is where the background is applied and the height of this container is calculated dynamically. It is much taller than the actual color section and moves vertically upwards and/or downwards whenever you scroll to create the parallax effect. Since the height of the actual color section is shorter than the parallax container, it covers parts of the images when you resize the browser. Long story short: You are correct that it is not that responsive compare to the fixed or scroll position so the solution is to create another page with different layout and serve it as mobile version of the page. You can use this plugin to do that: https://wordpress.org/plugins/equivalent-mobile-redirect/
If you don’t want to use a plugin, you can use css media queries to show or hide elements on different screen sizes. The Section ID field comes very handy:
http://stackoverflow.com/questions/11796297/div-show-hide-media-query
https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
https://kriesi.at/support/topic/replace-slider-on-mobile/
Best regards,
IsmaelIs this why the scroll down Arrow is not working in parallax mode?
But, a more responsive parallax color bg is possible i guess. Example: http://themeforest.net/item/accio-one-page-parallax-responsive-wordpress-theme/full_screen_preview/7059765
There is nothing left then to make the color bg at this page set to fixed on a mobile screen. Can you help me out please?
I use the following code and it works in IE11 but not in the latest Firefox and not in Chrome. The page starts with an emty gray peace and as soon as you scroll down it looks strange. (problem only below 767):<style type = “text/css”>
.container .content { padding-bottom: 0px !important; }
.main_color {
background-position: top !important;
}
@media only screen and (max-width: 767px) {
.av_one_third {
width: 33% !important;
}
}
@media only screen and (max-width: 767px) {
.av-parallax {
background-size: cover !important;
background-attachment: fixed !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
}}
</style>Hey!
I don’t think setting the background attachment will help at all. The current desktop layout of your website is not going to work on mobile device, I want to say because of the images’ subject focus, for lack of a better word and explanation. You have to create another version of the home page created specifically for mobile devices. Please follow the suggestions provided above. I will ask the rest of the support team if they have any other idea. You can also try the solution provided here:
https://kriesi.at/support/topic/couple-of-problems-with-3-1-update/#post-412766
FYI: The background of the “responsive parallax color bg” in the link you provided is also set to “cover” and behaves exactly the same as the theme’s color section. Parts of the images are covered on mobile devices.
Cheers!
IsmaelIve noticed that a lot of these scaling problems happen when the color section minimum height rule is applied i.e. (100% of browser height, 50% height, or custom height). When you make it “No minimum height, use content within section to define section height” the section instantly becomes scalable on firefox and internet explorer. Hope this helps people.
Thanks for sharing that information @dbarta :)
Regards,
JosueThank you Dbarta but i’m allready using that option but did not fix the problem. I tried:
#infotips .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
But that didn’t help either. I’m still hoping for some repsonsiveness like this http://goo.gl/ZGQpPE and that http://goo.gl/2q6SVq.
- You must be logged in to reply to this topic.