-
Posts
-
Hi Yigit,
You kindly fixed the testimonial grid issue for me so that the content of each testimonial is vertically central.
It doesn’t seem to be working on iPad – the text in each block of the grid is overlapping. See http://www.responsimulator.com/?url=www.caseyandassociates.co.uk (you may need to click Start Test then wait for the page to load and also click the right arrow to see the iPad version).
Hi stephtaryn!
Thank you for using Enfold.
The testimonial section looks good on iPad view. Could you please provide a screenshot of the issue?
Best regards,
IsmaelHi Ismael,
I looked on a friend’s iPad and it looks like this:
https://www.dropbox.com/s/kl8w910tk590ile/Screen%20Shot%202016-09-17%20at%2007.52.36.png?dl=0Thanks,
Steph
I have now got a screenshot from my friend’s iPad: https://www.dropbox.com/s/10lrjqtixsvq8gz/image1.PNG?dl=0
Is there any news on a fix for this? Yigit added CSS so that the testimonials aligned vertically central. Could this be the cause?
Perhaps the answer is to make it go to responsive (mobile) layout at an earlier point (just before it starts to overlap)? I’d like that for most of the pages anyway – resize your screen on that page (http://www.caseyandassociates.co.uk/testimonials/) the two buttons in the main colour section look strange at a smaller width.
See these screenshots:
It’s fine at this width: https://www.dropbox.com/s/kxchfy7htq6jeak/Fine%20up%20to%201118%20width.png?dl=0
It starts to look strange at this width: https://www.dropbox.com/s/eg6c9rus2ntb5il/Not%20good%20at%20smaller%20width.png?dl=0
What can I do to make sure the whole page (the two buttons and the testimonial grid) looks ok at any width?
Hi,
Please try to wrap all the custom CSS code you have without “@media” inside following
@media only screen and (min-width: 1024px) { /* custom CSS code here except the ones inside "@media" */ }If that does not help, please create a temporary admin login and post it here privately.
Best regards,
YigitHi Yigit,
I have custom CSS in the Enfold Theme options as well as in the Child Theme CSS (under Appearance>Editor)
I’m not sure where to put your code so you can you try it? I’ve included temporary WP login details in the private content part of this message.
Hi Yigit,
Is there any news on this? My client’s website is live and they are concerned at how it looks on iPads and smaller screens with the testimonials overlapping each other.
Hi,
try this code:
@media only screen and (max-width: 1024px) and (min-width: 768px) { div .av_one_fifth { width: 25%; margin-left: -2% !important; }}and adjust if needed.
Best regards,
AndyThat doesn’t make any difference (I event tried adding !important after the 25% and also tried different amounts for the width and margin left).
Can you login and sort it? It works fine without the vertical align enter CSS code (Yigit added) but it needs to be aligned vertically central also!
Hi,
try to add this code:
@media only screen and (max-width: 1024px) and (min-width: 768px) { .avia-button.avia-size-medium { padding: 12px 8px 10px; }}Best regards,
AndyThanks, now tried this and it doesn’t work. Please can you login and fix the issue rather than going backwards and forwards with all the code suggestions, or let me know if it cannot be fixed. I sent the login details in a previous message in this thread.
See this screenshot of how it appears with your code added:
https://www.dropbox.com/s/4myf17p9lxzc1o0/Screen%20Shot%202016-09-26%20at%2013.47.21.png?dl=0
Hi,
I thought we’re talking about these buttons: http://i.imgur.com/zHaGQkf.png
But now you’re showing something completely different for me on your screenshot. So I’m confused now.
However, I can see in your source code that you’re not using my code. Adjust the second padding value as needed, to maybe even 0px:@media only screen and (min-width: 768px) { .avia-button.avia-size-medium { padding: 12px 8px 10px; }}then the buttons should get better for you.
Best regards,
AndyHi,
I was talking about both (scroll up through the messages above) with the main problem being the layout of the testimonial grid. I tried your code but removed it again as it didn’t change the grid!
I’ve re-aded your code (below) but the buttons still don’t appear correctly on iPad – see screenshot: https://www.dropbox.com/s/dhxopq2cjp44w6f/Screen%20Shot%202016-09-26%20at%2016.03.17.png?dl=0I’ve left your code in Enfold Theme options Quick CSS:
@media only screen and (min-width: 768px) {
.avia-button.avia-size-medium {
padding: 12px 8px 10px;
}}Hi,
let’s keep focusing on one issue only here. Feel free to open another ticket for another issue.
As already said play around with the different padding values. Change 8px to for example 0px.
Best regards,
AndyHi Andy, the first post I made in this thread was about the grid as this is the main issue. I should have opened another ticket about the buttons but as it might have been a result of the changes Yigit made to the grid, I thought it best to mention it in this thread.
I tried different padding values and the buttons still look strange on iPad.
I’ve got the buttons looking ok now. I made the columns they are have no spacing between them. I’ll copy and paste my original post at the top of this thread to a new ticket then Andy.
- The topic ‘Testimonial grid you sorted – not good on iPad’ is closed to new replies.