visual artist non responsive - Support | Kriesi.at

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
May 16, 2020 at 7:32 pm #1213646

osovskie8
Participant

I just bought your theme ENFOLD
The reason I got is cause I liked “enfold-visual-artist\” demo. you have said that your theme is responsive however the background images are not shown on IOS and are too big and stretchy on android. I have followed on the forum (#1077937 ):
https://kriesi.at/support/topic/fixed-background-responsiveness-issue/#post-1080580

And added this css code using \”Simple Custom CSS\” plugin:

@media only screen and (max-width: 1024px) {
.avia-bg-style-fixed {
background-attachment: scroll !important;
background-size: cover !important;
}
}

It Does not work or maybe I did something wrong.
Please solve this issue

May 20, 2020 at 1:24 pm #1214648
Yigit
Keymaster
Hey,

We are sorry for the late reply!

Please add following code to Quick CSS in Enfold theme options > General Styling
```
@media only screen and (max-width: 1024px) {
    .avia-safari .avia-bg-style-fixed .av-parallax {
	background-attachment: scroll !important;
	background-size: cover !important;
    }
}
```
In case you have enabled CSS file merging and compression in Enfold theme options > Performance, please disable it, save theme options, refresh your page a few times and then re-enable it.
If it does not help or if you would like us to add the code for you, please create temporary admin logins and post them here privately.

As my teammate Ismael mentioned here, this is related to Safari

Regards,
Yigit
May 20, 2020 at 8:23 pm #1214751

osovskie8
Participant

I have done everything like you said.
before I could not see the images at all and now I can see them however
1.They are too big and part of them is off the screen. desktop version is perfect
2.The images are scrolling together with the foreground color so I do not get the affect you get in the desktop which is basically the point of the theme
3.when I switch the phone horizontally the images are in the right size but still move with the foreground

I am using a fresh wordpress install and a fresh theme so I suggest you do the same and tell me what to do in order for it to work

May 25, 2020 at 5:28 pm #1216197
Victoria
Inactive Moderator
Hi osovskie8,

Parallax does not work on mobile in this implementation. You can hide these sections and show other sections on mobile screens.

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
.avia_mobile #top .av-parallax {
    background-size: contain !important;
}
```
If you need further assistance please let us know.

Cheers!
Victoria
June 1, 2020 at 5:46 pm #1218479
Yigit
Keymaster
Hey,

Sorry for my late reply.

I can see the code Victoria shared is applied on your site. When I switch it to following on Safari developer mode, it works fine on my end.
```
.avia_mobile #top .av-parallax {
background-size: contain !important;
background-attachment: scroll!important;
}
```
I attached a screenshot in private content field.

Please update your CSS code. If you would like us to update it for you, please share admin logins in private content field :)

Regards,
Yigit
June 1, 2020 at 7:24 pm #1218500

osovskie8
Participant

It is better, I can see the images now but they are not sitting right. I am attaching private info for you to fix

June 1, 2020 at 11:27 pm #1218560
Yigit
Keymaster
Hi,

I changed the code to following one
```
.avia_mobile #top .av-parallax {
background-size: contain !important;
background-attachment: scroll!important;
background-position: 50% 65%!important;
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}
```
Please review your website :)

Best regards,
Yigit
September 4, 2020 at 12:35 pm #1243289
Linus
Participant
Hello,

Same problem here, images were not showing in the first place. I’ve put in both CSS-fragments, disabled the CSS-file merging and tried different order of the code-fragments. I know see the images (which is an improvement), but the ‘parallex effect’ (images fixed and moving 2 versions over each other) is not working. Both versions (drawing and photo) are now showing up under each other and that’s not even close to the desktop version which I fell in love with ;)

My question: is this (ever) going to work on mobile devices, especially iOS versions of Chrome and Safari? Victoria replied: ‘Parallax does not work on mobile in this implementation’, is there a way to fix this so it works the same as on desktop browsers? Or is this technically impossible? Of course I can hide sections on mobile devices as a work-around, but that is not a fix for me, the effect is gone.

I will put the website and credentials in the private content of this message, this is the CSS-code I used:
```
.avia_mobile #top .av-parallax {
background-size: contain !important;
background-attachment: scroll!important;
background-position: 50% 65%!important;
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}

@media only screen and (max-width: 1024px) {
.avia-bg-style-fixed {
    background-attachment: scroll !important;
    background-size: cover !important;
}
}
```
Thanks for your help in advance!

Best regards,
Linus
- This reply was modified 4 years, 2 months ago by Linus. Reason: Further clarified my question, want to knowe if this is _ever_ going to work
September 15, 2020 at 10:08 am #1245967

Linus
Participant

Hello,

Any progress on this matter yet? We are really looking for a solution, it’s not acceptable on mobile right now….

Thanks!

September 21, 2020 at 3:46 pm #1247390

Yigit
Keymaster

Hi @jg73,

We are sorry for the late reply!

It is technically possible but not without heavy modification. Therefore, we keep it disabled instead of offering it as an unreliable feature :)

You can read more about it here – http://www.javascriptkit.com/dhtmltutors/parallaxscrolling/page2.shtml

Best regards,
Yigit
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.