{"id":132849,"date":"2022-09-13T09:01:32","date_gmt":"2022-09-13T03:31:32","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=132849"},"modified":"2022-10-26T14:40:42","modified_gmt":"2022-10-26T09:10:42","slug":"fix-mobile-usability-issues-on-astra","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/fix-mobile-usability-issues-on-astra\/","title":{"rendered":"Solucionar problemas de usabilidad m\u00f3vil en Astra"},"content":{"rendered":"<p>Por lo general, Google Search Console informa de uno o todos los problemas siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Elementos clicables demasiado juntos<\/li><li>Texto demasiado peque\u00f1o para leerlo<\/li><li>Contenido m\u00e1s ancho que la pantalla<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfCu\u00e1l es la causa del problema?<\/h3>\n\n\n\n<p>El origen de la cuesti\u00f3n es doble:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>A veces Googlebot tiene prisa y no obtiene todos los recursos de la p\u00e1gina cuando la carga para indexarla.<\/li><li>Uno o varios elementos HTML de la p\u00e1gina son m\u00e1s anchos que el viewport m\u00f3vil, pero s\u00f3lo lo son cuando su CSS no se carga.<\/li><\/ol>\n\n\n\n<p>Las cosas se salen de madre cuando Googlebot se salta tu archivo CSS en una p\u00e1gina en la que alg\u00fan contenido obliga a escalar o desplazar la ventana gr\u00e1fica si no recibe un estilo CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo solucionar el problema?<\/h3>\n\n\n\n<p>El uso de un peque\u00f1o conjunto de estilos CSS solucionar\u00e1 este problema. Puedes a\u00f1adir el c\u00f3digo personalizado utilizando la configuraci\u00f3n del personalizador o accediendo directamente al archivo style.css del tema hijo Astra.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>    :where(body, iframe, pre, img, svg, video, canvas, select) {\n        max-width: 100%;\n        overflow: auto;\n        word-break: break-word;\n    }\n<\/code><\/pre>\n\n\n\n<p><strong>Usando style.css: <\/strong><\/p>\n\n\n\n<p>Tienes que a\u00f1adir el c\u00f3digo al archivo style.css del tema hijo Astra, preferiblemente justo antes del elemento que hace referencia a nuestra hoja de estilos.<\/p>\n\n\n\n<p>Eche un vistazo a la captura de pantalla adjunta para comprenderlo mejor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"392\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor-1024x392.png\" alt=\"\" class=\"wp-image-136149\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor-1024x392.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor-300x115.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor-768x294.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor-1536x588.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/theme-editor.png 1881w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Uso de la configuraci\u00f3n del personalizador:<\/strong><\/p>\n\n\n\n<p>Desde el panel de control de WordPress, vaya a Apariencia &gt; Personalizar &gt; CSS adicional y coloque el c\u00f3digo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css.png\"><img decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css-1024x479.png\" alt=\"\" class=\"wp-image-136152\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css-1024x479.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css-768x359.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css-1536x718.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/10\/additional-css.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Este fragmento garantiza que cuando Googlebot ignore los recursos de su p\u00e1gina, al menos aplique estos estilos a los elementos de la lista del selector : where().<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>max-width: 100% impide que los elementos sean m\u00e1s anchos que la ventana gr\u00e1fica.<\/li><li>overflow: auto asegura que el contenido dentro de un elemento no sobrepase su l\u00edmite de anchura.<\/li><li>word-break: break-word garantiza que las palabras largas pasen a la l\u00ednea siguiente cuando sobrepasan el ancho de la ventana gr\u00e1fica.<\/li><\/ul>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Por lo general, Google Search Console informa de uno o todos los problemas siguientes: Elementos en los que se puede hacer clic demasiado juntos Texto demasiado peque\u00f1o para leer Contenido m\u00e1s ancho que la pantalla \u00bfCu\u00e1l es la causa del problema? El origen del problema es doble: A veces, Googlebot tiene prisa y no obtiene todos los recursos de la p\u00e1gina cuando carga [...]<\/p>","protected":false},"author":89,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[108],"docs_tag":[],"class_list":{"0":"post-132849","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-general"},"spectra_custom_meta":{"wp_last_modified_info":["October 26, 2022 @ 2:40 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1671792794:89"],"rank_math_seo_score":["16"],"_wplmi_last_modified":["2022-10-26 14:40:42"],"rank_math_internal_links_processed":["1"],"_edit_last":["89"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"rank_math_primary_docs_category":["108"],"views":["10929"],"helpful":["23"],"unhelpful":["34"],"redirects":["26"],"rank_math_analytic_object_id":["1939"],"pfd_related_docs":[""],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"b65af5791d8873cda3468fa0b758fa6a\";s:6:\"images\";a:1:{i:0;i:136149;}}"],"_trp_automatically_translated_slug_es_ES":["solucionar-problemas-de-usabilidad-movil-en-astra"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:7:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/list\";i:2;s:12:\"core\/heading\";i:3;s:9:\"core\/code\";i:4;s:10:\"core\/image\";i:5;s:14:\"uagb\/container\";i:6;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777141003\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"mounikak","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/mounikak\/"},"uagb_comment_info":0,"uagb_excerpt":"Usually, Google Search Console reports one or all of the following issues: Clickable elements too close together Text too small to read Content wider than screen What\u2019s causing the issue? The origin of the issue is two-fold: Sometimes Googlebot is in a hurry and will not fetch all page resources when it loads your page&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132849"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=132849"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132849\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=132849"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=132849"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=132849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}