-
Posts
-
Hi
I have set up a new website at https://wigananxietycentre.co.uk/
I’ve used the colour section to create large images at the top of all pages. Unfortunately, these do not look so good on mobile devices, no matter how I change the settings. For example the woman on the home page images is always off centre and you can’t see her. Is it possible to deliver a different image (an edited version of the original) to mobile devices?
Ian
Hey ianguest71,
Please refer to the following:
https://kriesi.at/support/topic/different-image-desktopmobile-page/
Best regards,
Jordan ShannonHi
That looks way too complicated for me.
I think I’ll get around it by creating two colour sections, and I’ll use “element visibiity” to hide one on large and medium screens and the other on small and very small screens.Ian
Hi
I’ve actually found what should be a better solution, but I can’t get it to work. On this page there is a solution: https://kriesi.at/documentation/enfold/color-section/
I’ve followed the instructions in the “Different background image in mobile” and added the CSS code to the quick CSS section, but it doesn’t seem to work. Have you got an alternative code?
Ian
Hi,
Are you trying to add mobile specific css? Let me see what you have.
Best regards,
Jordan ShannonThis reply has been marked as private.Hi ianguest71,
Can you please make that account admin? We need to be able to access Quick css in theme options.
Best regards,
VictoriaHi
Done.
Ian
Hi,
Did you apply the “section-mobile-bg” as the Section ID of the color section? Edit the color section then look for the Section ID field. Add the “section-mobile-bg” text in the input field. It’s going to be the ID of that section.
Best regards,
IsmaelHi
Yes, I’ve done that.
Ian
Hi,
OK and all good now?
Best regards,
BasilisHi
No, nothing has changed. I had already applied the section ID in the colour section when I first contacted you and it wasn’t working.
I have supplied log-in details and given admin rights. Could someone log-in and take a look to see what the problem is, please?
Ian
Hi,
I checked your site and also tried to create a test page and I got the same results as you did.
As you may already know to view the changes after adding the CSS styles the cache should be cleared on your server and local browser.
It appears you are using a caching plugin and a CDN which may be the reason the CSS changes are not visible.
As you can see it on the below example the code works fine.
Please deactivate all plugins and CDN and try it again. It should work for you :)
Best regards,
VinayHi Vinay
Thanks for taking a look at it. I’ve turned all plugins off, cleared my browser cache and I still can’t get it to work. I can see that the example you posted works perfectly, and that is exactly what I want on my website.
This link shows that the mobile version continues to show the original image, rather than an image of a runner, which I’ve set the test page to http://mobiletest.me/iphone_5_emulator/?u=https://wigananxietycentre.co.uk/test-page/
I’d really appreciate it if anyone can resolve this, or has an alternative solution.
Ian
Hi,
Please perform the below steps to resolve the issue.
Please update your theme to the latest version 4.5
If a dashboard update does not work for you, go ahead and update using an FTP client.
Install a child theme
If the CSS code still does not work for you please use the below jQuery code in the child theme functions.php file
https://pastebin.com/raw/5H48i631In the above code, you can set a value for the section ID and background image URL.
This code will change the mobile background of the section in the test page.Let us know if you have any questions.
Best regards,
VinayHi Vinay
Thank you for the instructions.
I’ve updated the main themes and installed and activated the child theme. I tried the CSS code again and it didn’t work. I’ve copied and pasted the Jquery code to the child theme functions.php and that doesn’t work either.
Any other suggestions – or can someone log into my website to take a look?
Ian
Hi,
Thank you for trying out the steps.
I checked your site and removed the jQuery and deactivated the plugins for testing purpose. For some reason, the jQuery did not make any difference.
It was probably a caching issue.
I tried the CSS code again and the background image changes on the mobile version. Please check the test page :)
Best regards,
VinayHi Vinay
It looks like someone has added the Jquery code to the /_test page as a code block (the CSS code was removed after your last instructions).This seems to be working fine and I’ve managed to replicate it on another page.
Thank you for your help.
Ian
Hi ianguest71,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.