Email field shortening for mobile platforms

If you check out my site’s Contact Page at http://www.robocomtech.com/contact/, when the screen is shrunk horizontally as is the case for tablets, the email field as info@robocomtech.com does not respond well on mobile platforms. This is true as well for other pages that contain an email field.

I was able to fix this on the HOME screen by specifying a minimum width for the blue rectangle in the map row.

For the Contacts page, it is not clear how I might target the EMail item in CSS as I did for the Home Page.

Do you have ideas on what could be done to this field to make it mobile platform friendly. I would be ok if the email field itself simply gets hidden on mobile platforms, an abbreviation is used, or perhaps a space is added between “info” and “@” and “robocomtech.com”.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 600px) {
      .wpcf7-form-control-wrap, 
      .wpcf7-form-control-wrap input {
        max-width: 100%;
      }
    }

Regards,
Kharis

Thanks for the reply. I did as instructed and added this specific CSS. I did this in both the Additional CSS section, tested without the result I wanted, then added it to my Simple CSS add-on, same result, then attempted to simply set the minimum width for the entire Site Origins component at the top level, then attempted to set it for the EMail component only. Nothing worked properly. I did not add a Widget ID to target with CSS. I also noticed that the text “CONTACT INFORMATION” does not properly center for screen widths less than or equal to 600 pixels. I did a poor man’s cheat by adding spaces in the EMail surrounding the @ symbol to get a little bit better wrap performance on mobile platforms. Let me know if you have any other ideas on things to test. I will attach some screenshots (if possible) for reference.

Hello there,

I just noticed that your site has an active cache that should be flushed after new code addition. Otherwise it won’t load for certain amount of time.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

I have WPRocket for site caching, and I cleared out both the cache and the browser cache when testing. It did not make any difference. See attached screenshot. One is within the browser selecting S9 dimensions which shows the CONTACT INFORMATION not centered. Hope this helps.

Hello there,

Try this CSS code:

@media only screen and (max-width: 600px) {
  #pg-740-1 > div,
  #pg-740-1 > div > div.panel-grid-cell,
  #pg-740-1 #pgc-w5cbb36d7177a2-0-0.panel-grid-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }  
}

#pgc-740-1-0 .sow-features-feature:nth-of-type(4) {
  word-break: break-all;
}

Regards,
Kharis

Nice work, this did the trick for both the text centering and the long text used for EMail.

I think I understand the CSS trick for breaking up the long text, which is the lower entry in the CSS text.

I assume the upper one has to do with centering the text CONTACT INFORMATION.

Can you provide a simple explanation for what is being done some I may learn a bit.

Thanks for all your help.