-
Posts
-
Hello,
On the website http://www.DansPremiumCigars.com I find that when I create a fullwidth easy slider, the images appear well on desktop. The main image is correctly sized, the color overlay is working correctly and the .png appears center and correct. That said, when I look at the site from mobile, the overlay (.png file inserted as ‘pattern’) is no longer centered and only parts of it appear.
What can I do to fix this or is there a different setup I should be following? I’ve used the Advanced Layerslider a time or two but find it to be a lot to handle and a bit beyond my skills visually speaking.
Thanks in advance!
-Neil
Hey npmcgrew,
Thank you for using Enfold.
The overlay option is supposed to be use for patterns or images with no distinct focal point. Please remove the overlay and combine the actual slider images with it. I think you’ll come up with the same result and save your visitors a few bandwidth.
Best regards,
IsmaelHi Ismael,
Thank you for responding, it’s much appreciated. I understand what you’re saying regarding combining the header image and orange overlay. However, if I also include the white text in the original image, it also won’t likely be scaled correctly on mobile.
So, when using photoshop and illustrator, I have my background image that’s 1500×430 px and place a 70% orange overlay. After that, is there an exact placement and size the overlaying white text should be when just making these all into 1 image so as to appear correctly on the site?
Or is there potentially a quick CSS code I can apply to have mobile images centered or bound to a certain dimension?
Thank you again!
- You must be logged in to reply to this topic.