Mobile Issues: H3 Spacing Error & Testimonials

Shapely
1

Hi Noda,

I’m having two issues with my site here I was hoping you could help me with.

Issue 1: H3 Text
I have introduced new effects to make my H3 headers standout using:

h3 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 45px;
  text-rendering: optimizeLegibility;
	text-shadow: -.2px -.2px white, .2px .2px #333
  }

The problem is that on mobile, it looks like this:
H3-Issues

And anywhere the text is long with a H3 header, it does the same effect. Even “What You Should Expect” appears very close together on mobile.

Any suggestions on fix?

Issue 2: Testimonials are bleeding into other content on mobile
Some of the testimonials on mobile are bleeding into the Contact Section of the website. I’m not sure why, it’s just a couple as shown below:
bleed
It’s worse than pictured, because I’m using the Chrome Inspector Mobile view, but on a mobile phone, there’s a bit more text bleed.

Any thoughts on this would be appreciated. :slight_smile:

2

Hi there

  1. add line-height to your code :wink:
  2. I have this screen: Screenshot by Lightshot is this something you have? cant see any issue here?

Regards

3
  1. The line height worked. Thank you!
  2. On my phone, this is what I see: Screenshot-2022-06-27-at-6-24-31-PM — ImgBB
4

Hi

  1. Ok
  2. Ok, you can manipulate the height, try this code:
#shapely_home_testimonial-6 {
    max-height: 520px;
    height: 480px;
}
5

Thanks, Noda! Do you know how I can make this rule only applicable to mobile devices since it displays fine on desktop?

6

Hi

yes, sure, here we go:

@media only screen and (max-width: 600px) {
#shapely_home_testimonial-6 {
    max-height: 520px;
    height: 480px;
}
}

More here:

7

Thanks, Noda! I researched that page and implemented that code, unfortunately, it does not appear to be working.

I even tried an extreme test like this:

/* Testimonial Resize Mobile Only */
@media only screen and (max-width: 600px) {
#shapely_home_testimonial-6 {
    max-height: 6000px;
    height: 6000px;
}
}

And, it’s not working. :confused:

8

Hi @colorlibsupport any thoughts?

9

Hi :slight_smile:

Sorry for the delay,

Actually, it works, you need to lower the numbers in the code :slight_smile:

Also, this small snippet:

/* Testimonial Resize Mobile Only */
@media only screen and (max-width: 600px) {
#shapely_home_testimonial-6 {
    max-height: 500px;
    height: 500px;
}
.parallax-window {
Height: 500px
}
}
10

Thank you, @colorlibsupport. Unfortunately, it doesn’t seem to work.

image
image1170×1690 145 KB

Notice how the review bleeds over into the contact form DIV on mobile.

Not sure how to fix?

11

@colorlibsupport hi Noda, could I get some help on this, please?

12

Hi

Sorry, im really out of idea why is like that, I tried all CSS codes but its still not changing, it appears to be controlled by JS, I think it will require more than simple CSS :((

13

@colorlibsupport it hasn’t been an issue prior on this theme, I’m not sure what’s causing the review text to overlap. Surely there has to be a way to fix it. Can you think of any other solutions? Happy to give you access to the admin panel if you want to play with it. I’d really appreciate if you could help me fix this.

14

Hi @humblevoice

Ok, let me find something, it will require some testing so, if you are comfortable with sharing admin details privately send them to me in a private message

Kind regards

15

Thank you so much @colorlibsupport. Super appreciated. Private message sent.

17

Pm sent :slight_smile:

Please check