Hi Jordan,

The page is at: http://www.caseyandassociates.co.uk/testimonials/
Scroll down to the testimonials grid and resize your browser to see how it appears on an iPad.

Also see this screenshot from my friend’s iPad: https://www.dropbox.com/s/10lrjqtixsvq8gz/image1.PNG?dl=0

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.

Hi,

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=0

I’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;
}}

Thanks, 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.

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.

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?

I have now got a screenshot from my friend’s iPad: https://www.dropbox.com/s/10lrjqtixsvq8gz/image1.PNG?dl=0

I have fixed this issue now.

Can you try adding all your suggested css codes in as you have access and then let me know once you have solved it (if you can solve it!)?

Hi Yigit,

That solves the problem on a mobile screen but doesn’t on iPad or Desktop – they are still not aligned horizontally central but to the left.

Can it not somehow just be aligned centrally no matter what the screen size? There are so many different screen sizes from laptops to large iMacs to iPads etc. that we can’t add CSS code for every single scenario can we?

Hi Yigit,

Thanks for trying this but the testimonials with stars are still not aligned vertically central. They are the main ones that stand out as aligned wrong so are you able to sort that?

Hi Digit,

This doesn’t work as it makes the content in each box display to the left inside the box. How do I send you a screenshot? Or can you just log in and see what the issue is?

Hi Vinay,
Here’s the link: https://www.dropbox.com/s/5n33l8z8ykrr47d/Screen%20Shot%202016-08-25%20at%2009.15.56.png?dl=0

Thanks,

Steph