Undesired spacing between rows on iPhone 7

[timdumas]

Installed PRO ver: 3.2.3
Child Theme: yes
Wordpress ver: 5.5
PHP ver: 7.3.20

This is the URL that has the undesirable spacing between row 1 and row 2 on an iPhone 7.
URL: https://vcartscouncil.org/test/

This is the screenshot from the computer with the device set to XS where the spacing between rows is correct.

This is the screenshot from the iPhone 7 where the spacing between rows is incorrect.

Is there a way to guarantee the spacing between rows remains consistent?

Thank you for your time and consideration,
Tim

[ruenel]

Hello @timdumas,

Thank you for the very detailed post information. You are having this issue because of your custom CSS added in Pro > Theme Options. You have this:

@media only screen and (max-width: 768px) 
{
  #cs-content > .x-section 
  {
    padding: 3em 0% 0% 0%;
  }
  .vcacremovelmargin 
  {
    margin-left: 0%;
  }
  .vcactopmargin 
  {
    margin-top: 25px;
  }
  .VCACExhibitionNumber
  {
    display: none;
  }
  .VCACExhibitionfirst
  {
    padding-bottom: 2em;
    margin-bottom: 0em;
  }
  .VCACExhibitionsecond
  {
    padding-top: 0em;
    margin-top: 0em;
  }
  .dnd 
  {
    display:none;
  }
}

Kindly remove this CSS block:

#cs-content > .x-section 
  {
    padding: 3em 0% 0% 0%;
  }

We would love to know if this has worked for you. Thank you.

[timdumas]

Hi Ruenel,

No, the recommended change did not result in the desired effect.

Thank you the response. Are there any other recommendations?

Tim

[ruenel]

Hello Tim,

Removing the CSS block should work already. This is what I see when I view the size in smaller screens.

This could because of your iPhone browser cache. Kindly clear the mobile phone browser caches or use private browsing mode and test your site again.

Kindly let us know how it goes.