Greetings!

I am experiencing an issue with a resolution of over 1800px width but only in responsive mode - not necessarily a device size - for this staging site - https://staging.southms.nz/.

The headings on this page https://staging.southms.nz/services/ seem to be partially obscured by either line-height, margin or padding or something else.  I've attached screenshots.  I can't identify whether it's the module issue, column or row, but, I think it's the module.  I've given the text module a background of light blue to help identify the area module. 

I really have no idea why it's happening and how it's happening and I wonder whether anyone can please shed some light on this.  As I mentioned, It only happens in responsive mode when testing with dev tools.  And, the main thing, it only happens on a big Mac screen using Safari.  I have  not yet replicated it on any Window system or other browser.

Thanks

You are using Divi. That's the problem. It's one of the worst themes ever created for WordPress. It's popular but rubbish.

Anyway, it's your H2 styles that have gone awry. If you look on your phone you will see a similar formatting issue.

And the body of the site should never get to 1800px width. You end up with a very wide content area that is difficult to read (especially with the tiny grey font).

Right click on the wonky title and 'inspect element'. This will give you the styles from which you can find out which one is causing the issue on all resolutions.

37 minutes ago, fisicx said:

This will give you the styles from which you can find out which one is causing the issue on all resolutions.

Hi thanks for your feedback.  I have been always using inspect element and I cannot see the problem.  The H2 tag only displays this in inspect element.  I don't know where the issue is lying and this is my problem.  If I could see it changing whilst going through the responsive res then I could isolate it, but the H2 does not have much css on it.
I wasn't aware that I had the body on 1800px.  I do have a media query bigger than that for the panels only because the client insists on having it looking spot on for his large Mac screen and this was the only solution I could think of.  So I'm still not sure what to look for.  Can you please let me know?
 

    text-transform: uppercase;
    color: #2d4e57!important;
    letter-spacing: 1px;
    line-height: 1.5em;
    text-align: left;
    text-shadow: 0em 0.04em 0.07em rgba(0,0,0,0.29);

 

The solution is to not use divi.

when you use the code inspector there are loads of nested h2 styles along with the containing div and grid elements.

It can take ages to uncover the conflict because divi is so appalingly coded.

3 minutes ago, fisicx said:

The solution is to not use divi.

when you use the code inspector there are loads of nested h2 styles along with the containing div and grid elements.

Ok, thanks.  So putting Divi aside for now, because I've paid for it, sobeit.  Yes, there are nested styles for sure and it's like looking for a needle in a haystack for sure.  I was wondering whether you had isolated the issue at all, and if you have, would you mind letting me know perhaps where the issue is?  Because, for the life of me, I can't find it.  Many thanks.

I don't have a huge screen so can't see the problem.

And yes it really is like looking for a needle in a haystack.

I made my browser window 1800px wide and don't see the same bug as you. What browser are you using? Have you cleared your cache?

PS: the site is all sorts of broken on a small screen (Divi again) - you would be surprised t how many people now use their phone even for business searching.

might also add that the logo text is very hard to read even with good eyesight... consider using white/light text

 

This might be a good place to start:

.et_pb_row_3.et_pb_row {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

It's an inline style so will be part of the Divi customisation.

And is an example of the horrible code:

<div
class="et_pb_with_border et_pb_section et_pb_section_2 panel-gradient-services et_pb_with_background et_section_regular"><div
class="et_pb_with_border et_pb_row et_pb_row_3"><div
class="et_pb_with_border et_pb_column_4_4 et_pb_column et_pb_column_5  et_pb_css_mix_blend_mode_passthrough et-last-child"><div
class="et_pb_with_border et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left"><div
class=et_pb_text_inner><h2>Accident Investigation</h2></div></div></div></div>

The bug could be anywhere in that lot

Edited August 27, 20197 yr by fisicx

2 minutes ago, fisicx said:

This might be a good place to start:

.et_pb_row_3.et_pb_row {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

It's an inline style so will be part of the Divi costomisation.

steady on there could be minors around!

4 hours ago, fisicx said:

This might be a good place to start:

.et_pb_row_3.et_pb_row {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

It's an inline style so will be part of the Divi customisation.

And is an example of the horrible code:

<div
class="et_pb_with_border et_pb_section et_pb_section_2 panel-gradient-services et_pb_with_background et_section_regular"><div
class="et_pb_with_border et_pb_row et_pb_row_3"><div
class="et_pb_with_border et_pb_column_4_4 et_pb_column et_pb_column_5  et_pb_css_mix_blend_mode_passthrough et-last-child"><div
class="et_pb_with_border et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left"><div
class=et_pb_text_inner><h2>Accident Investigation</h2></div></div></div></div>

The bug could be anywhere in that lot

Thanks so much.   Yes, I am aware of this code and have also sighted it and this is not the issue though unfortunately.  It's not this coding because I tested it and removed it using inspect a few days ago and it didn't make a difference. I don't know how it's happening because there's no padding or margin or line-height to make the text hidden.

The mobile site looks fine on several phones that I've tested... however, the iPad not so good. 😞

So I still haven't found what's causing the obscured text. 

I know about the logo too thanks.  It's a staging environment so still a few things to sort out.

I agree, lots of nested coding and it does my head in.