CC number input font size – mobile

Hi there,

> The iframe that houses the CC number input field has a font size that is too large on mobile. Because of the size, the last 4 digits are hidden behind the credit company logo.

The credit card icon that appears on the input field for the CC number is applied using CSS from the WooCommerce Square plugin. On mobile, the CSS hides this icon by default.

If that’s not the case for you, you could try hiding the CC icon by applying:

.woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field-card-number{
background-image: none;
}

However, it is not possible to change the font size of the input field, as that comes from an iframe having Square URL, so all of the form’s content comes from the Square server.

Hope that helps!

This is getting closer! The CSS above removes the CC company logo… until numbers start being written in the field. Is there another CSS option that will permanently hide the logo?

The fix I’m using for now is the CSS below, which makes the last four digits go over the CC logo. my reason for continuing to search for a solution, though, is that the CSS top aligns the numbers for some reason so they aren’t centered in the input field. Not a huge deal, but it does make the slight look less polished

.woocommerce #payment div.payment_method_square_credit_card iframe.wc-square-credit-card-hosted-field-card-number {
padding: 0;
}

Hi there,

If you could send us the checkout URL, we could take a look further.

Also, it will be great if you could share your current System Status Report. You can get it by navigating to the WooCommerce / Status section of your site. Once there, click on the Get system report button and then copy it by clicking on the Copy for support button. Then paste it here in a comment.

Sure thing –

Checkout URL: https://yourfriendcleo.com/checkout/

Status report: `
### WordPress Environment ###

WordPress address (URL): https://yourfriendcleo.com
Site address (URL): https://yourfriendcleo.com
WC Version: 6.2.0
REST API Version: ? 6.2.0
WC Blocks Version: ? 6.7.3
Action Scheduler Version: ? 3.4.0
WC Admin Version: ? 3.1.0
Log Directory Writable: ?
WP Version: ? 5.8.3 – There is a newer version of WordPress available (5.9)
WP Multisite: –
WP Memory Limit: 128 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Flywheel/5.1.0
PHP Version: 7.4.27
PHP Post Max Size: 300 MB
PHP Time Limit: 178
PHP Max Input Vars: 1000
cURL Version: 7.68.0
OpenSSL/1.1.1f

SUHOSIN Installed: –
MySQL Version: 5.7.36-google
Max Upload Size: 300 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 6.2.0
WC Database Prefix: wp_eueru7k8id_
Total Database Size: 65.96MB
Database Data Size: 57.16MB
Database Index Size: 8.80MB
wp_eueru7k8id_woocommerce_sessions: Data: 0.03MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_eueru7k8id_woocommerce_order_items: Data: 0.08MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_woocommerce_order_itemmeta: Data: 0.47MB + Index: 0.39MB + Engine InnoDB
wp_eueru7k8id_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_eueru7k8id_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_actionscheduler_actions: Data: 1.02MB + Index: 0.94MB + Engine InnoDB
wp_eueru7k8id_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_actionscheduler_logs: Data: 0.22MB + Index: 0.16MB + Engine InnoDB
wp_eueru7k8id_ce4wp_abandoned_checkout: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_comments: Data: 0.17MB + Index: 0.09MB + Engine InnoDB
wp_eueru7k8id_e_submissions: Data: 0.02MB + Index: 0.27MB + Engine InnoDB
wp_eueru7k8id_e_submissions_actions_log: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_eueru7k8id_e_submissions_values: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_imagify_files: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_eueru7k8id_imagify_folders: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_itsec_bans: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_itsec_distributed_storage: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_itsec_fingerprints: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_itsec_geolocation_cache: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_itsec_lockouts: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_eueru7k8id_itsec_logs: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_eueru7k8id_itsec_mutexes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_itsec_opaque_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_itsec_temp: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_eueru7k8id_itsec_user_groups: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_lws_wr_achieved_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_lws_wr_historic: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_options: Data: 5.06MB + Index: 0.16MB + Engine InnoDB
wp_eueru7k8id_patchstack_event_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_patchstack_firewall_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_patchstack_logic: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_postmeta: Data: 9.11MB + Index: 2.86MB + Engine InnoDB
wp_eueru7k8id_posts: Data: 2.08MB + Index: 0.09MB + Engine InnoDB
wp_eueru7k8id_rank_math_404_logs: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_rank_math_analytics_gsc: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_eueru7k8id_rank_math_analytics_objects: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_rank_math_internal_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_rank_math_internal_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_rank_math_redirections: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_rank_math_redirections_cache: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_reviewx_criterias: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_reviewx_process_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_reviewx_reminder_email: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_taxjar_record_queue: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_trp_dictionary_en_us_es_mx: Data: 0.27MB + Index: 0.27MB + Engine InnoDB
wp_eueru7k8id_trp_gettext_en_us: Data: 0.38MB + Index: 0.47MB + Engine InnoDB
wp_eueru7k8id_trp_gettext_es_mx: Data: 1.52MB + Index: 0.47MB + Engine InnoDB
wp_eueru7k8id_trp_original_meta: Data: 0.08MB + Index: 0.11MB + Engine InnoDB
wp_eueru7k8id_trp_original_strings: Data: 0.22MB + Index: 0.16MB + Engine InnoDB
wp_eueru7k8id_usermeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_eueru7k8id_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_wc_order_product_lookup: Data: 0.05MB + Index: 0.06MB + Engine InnoDB
wp_eueru7k8id_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_eueru7k8id_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_eueru7k8id_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_eueru7k8id_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_eueru7k8id_woocommerce_square_customers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wpforms_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wpml_mails: Data: 9.02MB + Index: 0.00MB + Engine InnoDB
wp_eueru7k8id_wpr_rucss_resources: Data: 24.41MB + Index: 0.38MB + Engine InnoDB
wp_eueru7k8id_wpr_rucss_used_css: Data: 1.52MB + Index: 0.05MB + Engine InnoDB

### Post Type Counts ###

attachment: 76
cartflows_flow: 1
cartflows_step: 2
custom_css: 1
elementor_library: 16
language_switcher: 4
lws-wre-event: 4
lws-wre-pool: 1
lws-wre-unlockable: 1
nav_menu_item: 47
oembed_cache: 1
page: 34
post: 9
product: 8
product_variation: 6
shop_coupon: 13
shop_order: 200
shop_order_refund: 1
wcs_ruleset: 1
wpforms: 3

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (33) ###

Age Gate: by Phil Baker – 2.20.0
CartFlows: by CartFlows Inc – 1.8.2
Classic Editor: by WordPress Contributors – 1.6.2
Code Snippets: by Code Snippets Pro – 2.14.3
Duplicate Page: by mndpsingh287 – 4.4.8
Elementor Pro: by Elementor.com – 3.5.2
Elementor: by Elementor.com – 3.5.5
Google Analytics for WordPress by MonsterInsights: by MonsterInsights – 8.3.3
GreenPay? by Green Payment Processing: by Green Payment Processing – 2.2.0
Jetpack: by Automattic – 10.6
Kadence WooCommerce Email Designer: by Kadence WP – 1.4.10
Klaviyo: by Klaviyo
Inc. – 3.0.1

Nav Menu Roles: by Kathy Darling – 2.0.1
Patchstack Security: by Patchstack – 2.1.17
Rank Math SEO: by Rank Math – 1.0.82
Sucuri Security – Auditing, Malware Scanner and Hardening: by Sucuri Inc. – 1.8.30
TaxJar – Sales Tax Automation for WooCommerce: by TaxJar – 4.1.0
Temporary Login Without Password: by StoreApps – 1.7.1
TranslatePress – Multilingual: by Cozmoslabs
Razvan Mocanu
Madalin Ungureanu
Cristophor Hurduban – 2.2.0

TranslatePress – Personal: by Cozmoslabs
Razvan Mocanu
Madalin Ungureanu – 1.0.7

WooCommerce Conditional Shipping and Payments: by WooCommerce – 1.12.0
WooCommerce Shipment Tracking: by WooCommerce – 1.6.31
WooCommerce – ShipStation Integration: by WooCommerce – 4.1.48
WooCommerce Square: by WooCommerce – 2.8.0
WooCommerce Wholesale Lead Capture: by Rymera Web Co – 1.17
WooCommerce Wholesale Order Form: by Rymera Web Co – 1.21.1
WooCommerce Wholesale Prices Premium: by Rymera Web Co – 1.27.2
WooCommerce Wholesale Prices: by Rymera Web Co – 2.0
WooCommerce: by Automattic – 6.2.0
WP Mail Logging: by Wysija – 1.10.4
WP Rocket: by WP Media – 3.10.7
WPForms Lite: by WPForms – 1.7.2.1
Yotpo Social Reviews for Woocommerce: by Yotpo – 1.1.8

### Inactive Plugins (6) ###

Advanced Coupons for WooCommerce Free: by Rymera Web Co – 3.1
Akismet Anti-Spam: by Automattic – 4.2.2
Antispam Bee: by pluginkollektiv – 2.10.0
Imagify: by WP Media – 1.10
Stratum – Elementor Widgets: by MotoPress – 1.3.12
WooCommerce – StampscomEndicia Integration: by Stamps.comEndicia – 2.0.0

### Dropin Plugins (2) ###

advanced-cache.php: advanced-cache.php
db-error.php: db-error.php

### Settings ###

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: ?

### WC Pages ###

Shop base: #6 – /shop/
Cart: ? Page does not contain the [woocommerce_cart] shortcode or the woocommerce/cart block.
Checkout: #8 – /checkout/
My account: #9 – /my-account/
Terms and conditions: #93 – /terms-of-service/

### Theme ###

Name: Hello Elementor
Version: 2.4.1 (update to version 2.5.0 is available)
Author URL: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ?

### Templates ###

Overrides: –

### Square ###

Environment: Production
Tokenization Enabled: –
Debug Mode: Off

### Action Scheduler ###

Complete: 2,711
Oldest: 2022-01-18 11:33:22 -0800
Newest: 2022-02-16 12:41:57 -0800

Pending: 9
Oldest: 2022-02-16 13:00:15 -0800
Newest: 2022-02-19 19:31:09 -0800

### Status report information ###

Generated at: 2022-02-16 12:42:40 -08:00
`

Hi again!

Thanks for your reply!????

Sure thing –

Checkout URL: https://yourfriendcleo.com/checkout/

Please try and use the snippet here:

/* Expand Credit Card Field for mobile /  4698725-zen EF */

@media screen and (max-width: 768px){
.woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field-card-number {
    padding-right: 0px;
    background-image: none!important;
}
}

If pasting it in Appearance > Customise > Additional CSS does not work you can alternatively try using this third-party plugin to add the code snippet:

– Code Snippets

I think this will be able to fix the issue, do let us know if this works out for you! Feel free to reach out with further questions or concerns.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

This worked when I used it in combination with the CSS I already had on the site! The numbers are still top-aligned in the input field, but this is a huge improvement.

Thank you!

I noticed on the mobile version it was only showing 8 fields of digits. I’m using this CSS to expand the credit card field on mobile and remove CC logo.

@media screen and (max-width: 768px){
.woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field-card-number {
    padding-right: 0px;
    background-image: none!important;
}
}
@media screen and (max-width: 768px){
.woocommerce-checkout #payment div.payment_box {
  padding: 0px 0px !important;
}
}