{"id":466,"date":"2026-08-11T19:18:05","date_gmt":"2026-08-11T19:18:05","guid":{"rendered":"https:\/\/flowbase.co.mz\/blog\/?p=466"},"modified":"2026-08-16T20:14:36","modified_gmt":"2026-08-16T20:14:36","slug":"como-deixar-tema-wordpress-responsivo","status":"publish","type":"post","link":"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/","title":{"rendered":"Como deixar qualquer tema WordPress 100% responsivo"},"content":{"rendered":"<div>\n<div class=\"flex h-svh w-screen flex-col\">\n<div class=\"relative z-0 flex min-h-0 w-full flex-1\">\n<div class=\"relative flex min-h-0 w-full min-w-0 flex-1\">\n<div class=\"group\/side-pane-shell-host relative flex min-h-0 min-w-0 flex-1 has-[[data-side-pane-shell-transition]]:overflow-x-clip\" data-side-pane-shell-host=\"true\">\n<div class=\"@container\/main relative flex min-w-0 flex-1 flex-col -translate-y-[calc(env(safe-area-inset-bottom,0px)\/2)] pt-[calc(env(safe-area-inset-bottom,0px)\/2)]\">\n<div class=\"@w-sm\/main:[scrollbar-gutter:var(--stage-scroll-gutter)] touch:[scrollbar-width:none] group\/scroll-root relative flex min-h-0 min-w-0 flex-1 flex-col [scrollbar-gutter:stable] not-print:overflow-x-clip not-print:overflow-y-auto group-data-stream-active\/scroll-root:[overflow-anchor:none] not-print:data-expanded-composer:overflow-y-hidden! not-print:data-voice-focus-mode:overflow-y-hidden! scroll-pt-(--header-height) [--sticky-padding-top:var(--header-height)] [--sticky-padding-bottom:0px] [--scroll-root-safe-area-inset-top:calc(var(--sticky-padding-top)+env(safe-area-inset-top,0px))] [--scroll-root-safe-area-inset-bottom:calc(var(--sticky-padding-bottom)+var(--screen-keyboard-height,0px)+env(safe-area-inset-bottom,0px))] [--scroll-root-safe-area-height:calc(100lvh-var(--scroll-root-safe-area-inset-top)-var(--scroll-root-safe-area-inset-bottom))] has-data-[fixed-header=less-than-md]:md:scroll-pt-0 has-data-[fixed-header=less-than-md]:md:[--sticky-padding-top:0px] has-data-[fixed-header=never]:scroll-pt-0 has-data-[fixed-header=never]:[--sticky-padding-top:0px] has-data-[fixed-header=less-than-xl]:@w-xl\/main:scroll-pt-0 has-data-[fixed-header=less-than-xl]:@w-xl\/main:[--sticky-padding-top:0px] has-data-[fixed-header=less-than-xxl]:@w-2xl\/main:scroll-pt-0 has-data-[fixed-header=less-than-xxl]:@w-2xl\/main:[--sticky-padding-top:0px] group-data-[side-pane-shell-open]\/side-pane-shell-host:[scrollbar-width:none] group-data-[side-pane-shell-open]\/side-pane-shell-host:[&amp;::-webkit-scrollbar]:hidden\" data-scroll-root=\"\" data-scroll-from-end=\"\">\n<div id=\"thread\" class=\"group\/thread flex flex-col min-h-full\">\n<div class=\"composer-parent flex flex-1 flex-col focus-visible:outline-0\">\n<div class=\"relative basis-auto flex-col -mb-(--composer-overlap-px) pb-(--composer-overlap-px) [--composer-overlap-px:28px] grow flex\">\n<div class=\"flex min-h-0 grow flex-col text-sm\">\n<div class=\"qMYqUG_convSearchResultHighlightRoot\">\n<div class=\"\" data-turn-id-container=\"d2184462-a39f-454e-bb6e-0c883a0beae7\" data-is-intersecting=\"true\">\n<section class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-(--sticky-padding-top)\" dir=\"auto\" data-turn-id=\"d2184462-a39f-454e-bb6e-0c883a0beae7\" data-turn-id-container=\"d2184462-a39f-454e-bb6e-0c883a0beae7\" data-testid=\"conversation-turn-1\" data-turn=\"user\">\n<div class=\"text-base my-auto mx-auto pt-3 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col\" data-conversation-screenshot-content=\"\">\n<div class=\"flex max-w-full flex-col gap-4 grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"user\" data-message-id=\"d2184462-a39f-454e-bb6e-0c883a0beae7\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden items-end rtl:items-start\">\n<div class=\"corner-superellipse\/0.98 relative min-w-0 overflow-hidden rounded-[22px] px-4 py-2.5 leading-6 user-message-bubble-color max-w-(--user-chat-width,70%)\">\n<div class=\"max-w-full min-w-0 [overflow-wrap:anywhere] whitespace-pre-wrap\"><span style=\"font-family: 'Open Sans', arial, sans-serif; font-size: 32px; letter-spacing: -0.02em;\">Como deixar qualquer tema WordPress 100% responsivo<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<div class=\"\" data-turn-id-container=\"request-6a7ac704-e318-83ea-91c5-6f1566c82430-0\" data-is-intersecting=\"true\">\n<section class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"request-6a7ac704-e318-83ea-91c5-6f1566c82430-0\" data-turn-id-container=\"request-6a7ac704-e318-83ea-91c5-6f1566c82430-0\" data-testid=\"conversation-turn-6\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-8 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" data-conversation-screenshot-content=\"\">\n<div class=\"flex max-w-full flex-col gap-4 grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+&amp;]:mt-1\" dir=\"auto\" tabindex=\"0\" data-message-author-role=\"assistant\" data-message-id=\"f6e521a7-fb0d-4422-84fa-2cd11ed04ea9\" data-message-model-slug=\"gpt-5-6\" data-turn-start-message=\"true\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden\">\n<div class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\">\n<p class=\"\" data-start=\"55\" data-end=\"299\">Hoje, ter um site que funciona bem apenas no computador j\u00e1 n\u00e3o \u00e9 suficiente. Grande parte dos visitantes acessa sites usando\u00a0<strong data-start=\"180\" data-end=\"205\">smartphones e tablets<\/strong>, por isso a responsividade tornou-se um dos pontos mais importantes de um bom site WordPress.<\/p>\n<p data-start=\"301\" data-end=\"528\">Se o teu site apresenta textos cortados, imagens que ultrapassam a tela, menus dif\u00edceis de usar ou elementos que ficam desorganizados no celular, provavelmente existem problemas de responsividade que precisam de ser corrigidos.<\/p>\n<p data-start=\"530\" data-end=\"797\">A boa not\u00edcia \u00e9 que\u00a0<strong data-start=\"550\" data-end=\"597\">n\u00e3o precisas necessariamente trocar de tema<\/strong>. Com alguns ajustes de configura\u00e7\u00e3o, CSS e otimiza\u00e7\u00e3o dos elementos da p\u00e1gina, \u00e9 poss\u00edvel transformar praticamente qualquer tema WordPress num site muito mais adapt\u00e1vel a diferentes tamanhos de tela.<\/p>\n<p data-start=\"799\" data-end=\"942\">Neste artigo, vais aprender\u00a0<strong data-start=\"827\" data-end=\"877\">como deixar qualquer tema WordPress responsivo<\/strong>, desde os ajustes mais simples at\u00e9 algumas corre\u00e7\u00f5es usando CSS.<\/p>\n<hr data-start=\"944\" data-end=\"947\" \/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabela de conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a8541;color:#1a8541\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a8541;color:#1a8541\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#O_que_significa_ter_um_tema_WordPress_responsivo\" >O que significa ter um tema WordPress responsivo?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Como_verificar_se_o_teu_tema_e_responsivo\" >Como verificar se o teu tema \u00e9 responsivo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#1_Corrige_problemas_de_largura\" >1. Corrige problemas de largura<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#2_Evita_a_rolagem_horizontal\" >2. Evita a rolagem horizontal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#3_Torna_as_imagens_responsivas\" >3. Torna as imagens responsivas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#4_Usa_Media_Queries_no_CSS\" >4. Usa Media Queries no CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#5_Ajusta_o_tamanho_dos_textos\" >5. Ajusta o tamanho dos textos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#6_Corrige_menus_no_celular\" >6. Corrige menus no celular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#7_Torna_os_botoes_faceis_de_tocar\" >7. Torna os bot\u00f5es f\u00e1ceis de tocar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#8_Adapta_as_colunas_para_dispositivos_moveis\" >8. Adapta as colunas para dispositivos m\u00f3veis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#9_Cuidado_com_tabelas\" >9. Cuidado com tabelas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#10_Verifica_videos_e_iframes\" >10. Verifica v\u00eddeos e iframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#11_Usa_unidades_relativas\" >11. Usa unidades relativas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#12_Verifica_o_Elementor_Gutenberg_ou_outro_construtor\" >12. Verifica o Elementor, Gutenberg ou outro construtor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#13_Nao_utilizes_demasiados_elementos_fixos\" >13. N\u00e3o utilizes demasiados elementos fixos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#14_Utiliza_o_Customizer_ou_CSS_adicional_do_WordPress\" >14. Utiliza o Customizer ou CSS adicional do WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Importante\" >Importante<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#15_Testa_em_varios_tamanhos_de_tela\" >15. Testa em v\u00e1rios tamanhos de tela<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#16_Verifica_a_velocidade_no_celular\" >16. Verifica a velocidade no celular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Ferramentas_para_testar_a_responsividade\" >Ferramentas para testar a responsividade<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Chrome_DevTools\" >Chrome DevTools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Google_PageSpeed_Insights\" >Google PageSpeed Insights<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Navegador_do_celular\" >Navegador do celular<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Erros_comuns_que_deves_evitar\" >Erros comuns que deves evitar<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Colocar_largura_fixa_em_tudo\" >&#x274c; Colocar largura fixa em tudo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Esconder_a_rolagem_horizontal_sem_investigar\" >&#x274c; Esconder a rolagem horizontal sem investigar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Utilizar_imagens_gigantes\" >&#x274c; Utilizar imagens gigantes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Ignorar_o_menu_mobile\" >&#x274c; Ignorar o menu mobile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Utilizar_fontes_muito_grandes\" >&#x274c; Utilizar fontes muito grandes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Fazer_alteracoes_diretamente_no_tema_sem_protecao\" >&#x274c; Fazer altera\u00e7\u00f5es diretamente no tema sem prote\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#%E2%9D%8C_Testar_somente_no_computador\" >&#x274c; Testar somente no computador<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Checklist_para_deixar_o_teu_WordPress_responsivo\" >Checklist para deixar o teu WordPress responsivo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/flowbase.co.mz\/blog\/como-deixar-tema-wordpress-responsivo\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 data-section-id=\"stj5bu\" data-start=\"949\" data-end=\"1001\"><span class=\"ez-toc-section\" id=\"O_que_significa_ter_um_tema_WordPress_responsivo\"><\/span>O que significa ter um tema WordPress responsivo?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"1003\" data-end=\"1119\">Um site responsivo \u00e9 aquele que consegue\u00a0<strong data-start=\"1044\" data-end=\"1118\">adaptar automaticamente o seu conte\u00fado ao tamanho da tela do visitante<\/strong>.<\/p>\n<p data-start=\"1121\" data-end=\"1299\">Em um computador, por exemplo, o site pode apresentar v\u00e1rias colunas lado a lado. J\u00e1 em um smartphone, essas colunas podem ser organizadas verticalmente para facilitar a leitura.<\/p>\n<p data-start=\"1301\" data-end=\"1348\">Um tema responsivo deve adaptar elementos como:<\/p>\n<ul>\n<li data-start=\"1352\" data-end=\"1359\">Textos;<\/li>\n<li data-start=\"1362\" data-end=\"1370\">Imagens;<\/li>\n<li data-start=\"1373\" data-end=\"1380\">V\u00eddeos;<\/li>\n<li data-start=\"1383\" data-end=\"1389\">Menus;<\/li>\n<li data-start=\"1392\" data-end=\"1399\">Bot\u00f5es;<\/li>\n<li data-start=\"1402\" data-end=\"1410\">Tabelas;<\/li>\n<li data-start=\"1413\" data-end=\"1421\">Colunas;<\/li>\n<li data-start=\"1424\" data-end=\"1436\">Formul\u00e1rios;<\/li>\n<li data-start=\"1439\" data-end=\"1452\">Espa\u00e7amentos;<\/li>\n<li data-start=\"1455\" data-end=\"1474\">Cabe\u00e7alho e rodap\u00e9.<\/li>\n<\/ul>\n<p data-start=\"1476\" data-end=\"1600\">O objetivo \u00e9 proporcionar uma boa experi\u00eancia independentemente de o visitante utilizar um computador, tablet ou smartphone.<\/p>\n<hr data-start=\"1602\" data-end=\"1605\" \/>\n<h1 data-section-id=\"1cd5wao\" data-start=\"1607\" data-end=\"1650\"><span class=\"ez-toc-section\" id=\"Como_verificar_se_o_teu_tema_e_responsivo\"><\/span>Como verificar se o teu tema \u00e9 responsivo<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"1652\" data-end=\"1748\">Antes de come\u00e7ar a fazer altera\u00e7\u00f5es, \u00e9 importante descobrir quais elementos est\u00e3o com problemas.<\/p>\n<p data-start=\"1750\" data-end=\"1816\">Uma forma simples \u00e9 abrir o teu site em um smartphone e verificar:<\/p>\n<ul>\n<li data-start=\"1820\" data-end=\"1858\">Se o texto cabe completamente na tela;<\/li>\n<li data-start=\"1861\" data-end=\"1912\">Se as imagens n\u00e3o ultrapassam a largura do celular;<\/li>\n<li data-start=\"1915\" data-end=\"1947\">Se o menu funciona corretamente;<\/li>\n<li data-start=\"1950\" data-end=\"1983\">Se os bot\u00f5es s\u00e3o f\u00e1ceis de tocar;<\/li>\n<li data-start=\"1986\" data-end=\"2019\">Se n\u00e3o existe rolagem horizontal;<\/li>\n<li data-start=\"2022\" data-end=\"2054\">Se os t\u00edtulos n\u00e3o ficam enormes;<\/li>\n<li data-start=\"2057\" data-end=\"2095\">Se os elementos n\u00e3o ficam sobrepostos.<\/li>\n<\/ul>\n<p data-start=\"2097\" data-end=\"2180\">Tamb\u00e9m podes testar o site utilizando as ferramentas de desenvolvedor do navegador.<\/p>\n<p data-start=\"2182\" data-end=\"2212\">No Google Chrome, por exemplo:<\/p>\n<ol>\n<li data-start=\"2217\" data-end=\"2233\">Abre o teu site.<\/li>\n<li data-start=\"2217\" data-end=\"2233\">Pressione <strong>F12.<\/strong><\/li>\n<li>Procura \u00edcone de dispostivos m\u00f3veis<\/li>\n<li data-start=\"2302\" data-end=\"2343\">Escolhe diferentes modelos de smartphone.<\/li>\n<li data-start=\"2347\" data-end=\"2403\">Verifica como o site se comporta em diferentes larguras.<\/li>\n<\/ol>\n<p data-start=\"2405\" data-end=\"2523\">N\u00e3o testes apenas em uma resolu\u00e7\u00e3o. Um site pode funcionar corretamente em um celular e apresentar problemas em outro.<\/p>\n<hr data-start=\"2525\" data-end=\"2528\" \/>\n<h1 data-section-id=\"1wcuyyg\" data-start=\"2530\" data-end=\"2563\"><span class=\"ez-toc-section\" id=\"1_Corrige_problemas_de_largura\"><\/span>1. Corrige problemas de largura<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"2565\" data-end=\"2668\">Um dos problemas mais comuns em sites WordPress \u00e9 algum elemento possuir uma largura fixa muito grande.<\/p>\n<p data-start=\"2670\" data-end=\"2682\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">container<\/span> {\r\n    width: <span class=\"\u037cy\">1200<\/span><span class=\"\u037cv\">px<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2730\" data-end=\"2857\">Esse c\u00f3digo pode funcionar em uma tela grande, mas um celular com 390px de largura n\u00e3o consegue acomodar um elemento de 1200px.<\/p>\n<p data-start=\"2859\" data-end=\"2893\">Uma abordagem mais flex\u00edvel seria:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">container<\/span> {\r\n    width: <span class=\"\u037cy\">100<\/span><span class=\"\u037cv\">%<\/span>;\r\n    max-width: <span class=\"\u037cy\">1200<\/span><span class=\"\u037cv\">px<\/span>;\r\n    margin: <span class=\"\u037cy\">0<\/span> <span class=\"\u037cy\">auto<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2982\" data-end=\"3080\">Dessa forma, o elemento pode ocupar o espa\u00e7o dispon\u00edvel sem ultrapassar a largura m\u00e1xima definida.<\/p>\n<hr data-start=\"3082\" data-end=\"3085\" \/>\n<h1 data-section-id=\"21r7dh\" data-start=\"3087\" data-end=\"3118\"><span class=\"ez-toc-section\" id=\"2_Evita_a_rolagem_horizontal\"><\/span>2. Evita a rolagem horizontal<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"3120\" data-end=\"3286\">Se o visitante precisa arrastar a p\u00e1gina para os lados para conseguir visualizar todo o conte\u00fado, existe provavelmente algum elemento ultrapassando a largura da tela.<\/p>\n<p data-start=\"3288\" data-end=\"3321\">Isso pode acontecer por causa de:<\/p>\n<ul>\n<li data-start=\"3325\" data-end=\"3347\">Imagens muito grandes;<\/li>\n<li data-start=\"3350\" data-end=\"3358\">Tabelas;<\/li>\n<li data-start=\"3361\" data-end=\"3368\">V\u00eddeos;<\/li>\n<li data-start=\"3371\" data-end=\"3382\">Containers;<\/li>\n<li data-start=\"3385\" data-end=\"3406\">C\u00f3digo personalizado;<\/li>\n<li data-start=\"3409\" data-end=\"3436\">Elementos com largura fixa.<\/li>\n<\/ul>\n<p data-start=\"3438\" data-end=\"3517\">Uma regra bastante utilizada para evitar que imagens ultrapassem o container \u00e9:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">img<\/span> {\r\n    max-width: <span class=\"\u037cy\">100<\/span><span class=\"\u037cv\">%<\/span>;\r\n    height: <span class=\"\u037cy\">auto<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3578\" data-end=\"3650\">Assim, a imagem pode diminuir proporcionalmente quando a tela for menor.<\/p>\n<p data-start=\"3652\" data-end=\"3834\"><strong data-start=\"3652\" data-end=\"3664\">Aten\u00e7\u00e3o:<\/strong>\u00a0n\u00e3o \u00e9 recomend\u00e1vel simplesmente esconder toda a rolagem horizontal com\u00a0<code data-start=\"3736\" data-end=\"3756\">overflow-x: hidden<\/code>\u00a0sem descobrir primeiro a causa do problema. Isso pode apenas esconder o erro.<\/p>\n<hr data-start=\"3836\" data-end=\"3839\" \/>\n<h1 data-section-id=\"p2qy5a\" data-start=\"3841\" data-end=\"3874\"><span class=\"ez-toc-section\" id=\"3_Torna_as_imagens_responsivas\"><\/span>3. Torna as imagens responsivas<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"3876\" data-end=\"3965\">Imagens grandes podem causar dois problemas: quebrar o layout e deixar o site mais lento.<\/p>\n<p data-start=\"3967\" data-end=\"4038\">Para garantir que elas se adaptem ao espa\u00e7o dispon\u00edvel, podes utilizar:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">img<\/span> {\r\n    max-width: <span class=\"\u037cy\">100<\/span><span class=\"\u037cv\">%<\/span>;\r\n    height: <span class=\"\u037cy\">auto<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4099\" data-end=\"4191\">Al\u00e9m disso, \u00e9 importante otimizar o tamanho dos ficheiros antes de carreg\u00e1-los no WordPress.<\/p>\n<p data-start=\"4193\" data-end=\"4213\">Sempre que poss\u00edvel:<\/p>\n<ul>\n<li data-start=\"4217\" data-end=\"4252\">Redimensiona imagens muito grandes;<\/li>\n<li data-start=\"4255\" data-end=\"4277\">Comprime os ficheiros;<\/li>\n<li data-start=\"4280\" data-end=\"4330\">Utiliza formatos modernos quando forem suportados;<\/li>\n<li data-start=\"4333\" data-end=\"4382\">Evita enviar imagens maiores do que o necess\u00e1rio.<\/li>\n<\/ul>\n<p data-start=\"4384\" data-end=\"4456\">Isso melhora tanto a\u00a0<strong data-start=\"4405\" data-end=\"4423\">responsividade<\/strong>\u00a0quanto o\u00a0<strong data-start=\"4433\" data-end=\"4455\">desempenho do site<\/strong>.<\/p>\n<hr data-start=\"4458\" data-end=\"4461\" \/>\n<h1 data-section-id=\"vivzap\" data-start=\"4463\" data-end=\"4492\"><span class=\"ez-toc-section\" id=\"4_Usa_Media_Queries_no_CSS\"><\/span>4. Usa Media Queries no CSS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"4494\" data-end=\"4587\">As\u00a0<strong data-start=\"4497\" data-end=\"4514\">Media Queries<\/strong>\u00a0s\u00e3o uma das ferramentas mais importantes para criar layouts responsivos.<\/p>\n<p data-start=\"4589\" data-end=\"4683\">Elas permitem aplicar determinadas regras CSS apenas quando a tela possui determinada largura.<\/p>\n<p data-start=\"4685\" data-end=\"4697\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@media<\/span> (max-width: <span class=\"\u037cy\">768<\/span><span class=\"\u037cv\">px<\/span>) {\r\n    .<span class=\"\u037c10\">menu<\/span> {\r\n        display: <span class=\"\u037cy\">block<\/span>;\r\n    }\r\n\r\n    .<span class=\"\u037c10\">container<\/span> {\r\n        padding: <span class=\"\u037cy\">15<\/span><span class=\"\u037cv\">px<\/span>;\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4830\" data-end=\"4926\">Nesse exemplo, as regras ser\u00e3o aplicadas quando a largura da tela for igual ou inferior a 768px.<\/p>\n<p data-start=\"4928\" data-end=\"4972\">Podes utilizar Media Queries para modificar:<\/p>\n<ul>\n<li data-start=\"4976\" data-end=\"4995\">Tamanho das fontes;<\/li>\n<li data-start=\"4998\" data-end=\"5006\">Margens;<\/li>\n<li data-start=\"5009\" data-end=\"5022\">Espa\u00e7amentos;<\/li>\n<li data-start=\"5009\" data-end=\"5022\">Menus;<\/li>\n<li data-start=\"5009\" data-end=\"5022\">Imagens<\/li>\n<li>Largura das colunas;<\/li>\n<li>Bot\u00f5es<\/li>\n<li>Cabe\u00e7alhos<\/li>\n<\/ul>\n<hr data-start=\"5091\" data-end=\"5094\" \/>\n<h1 data-section-id=\"5x7coz\" data-start=\"5096\" data-end=\"5128\"><span class=\"ez-toc-section\" id=\"5_Ajusta_o_tamanho_dos_textos\"><\/span>5. Ajusta o tamanho dos textos<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"5130\" data-end=\"5215\">Um texto que parece perfeito em um monitor grande pode ficar enorme em um smartphone.<\/p>\n<p data-start=\"5217\" data-end=\"5289\">Por isso, \u00e9 importante definir tamanhos adequados para diferentes telas.<\/p>\n<p data-start=\"5291\" data-end=\"5303\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">h1<\/span> {\r\n    font-size: <span class=\"\u037cy\">42<\/span><span class=\"\u037cv\">px<\/span>;\r\n}\r\n\r\n<span class=\"\u037cv\">@media<\/span> (max-width: <span class=\"\u037cy\">768<\/span><span class=\"\u037cv\">px<\/span>) {\r\n    <span class=\"\u037c13\">h1<\/span> {\r\n        font-size: <span class=\"\u037cy\">32<\/span><span class=\"\u037cv\">px<\/span>;\r\n    }\r\n}\r\n\r\n<span class=\"\u037cv\">@media<\/span> (max-width: <span class=\"\u037cy\">480<\/span><span class=\"\u037cv\">px<\/span>) {\r\n    <span class=\"\u037c13\">h1<\/span> {\r\n        font-size: <span class=\"\u037cy\">26<\/span><span class=\"\u037cv\">px<\/span>;\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5487\" data-end=\"5572\">Isso permite reduzir progressivamente o tamanho do t\u00edtulo conforme a tela fica menor.<\/p>\n<p data-start=\"5574\" data-end=\"5649\">Tamb\u00e9m evita situa\u00e7\u00f5es em que um t\u00edtulo ocupa quase toda a tela do celular.<\/p>\n<hr data-start=\"5651\" data-end=\"5654\" \/>\n<h1 data-section-id=\"urgreg\" data-start=\"5656\" data-end=\"5685\"><span class=\"ez-toc-section\" id=\"6_Corrige_menus_no_celular\"><\/span>6. Corrige menus no celular<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"5687\" data-end=\"5754\">O menu de navega\u00e7\u00e3o \u00e9 um dos elementos mais importantes de um site.<\/p>\n<p data-start=\"5756\" data-end=\"5858\">Um menu que funciona perfeitamente no computador pode ficar completamente desorganizado no smartphone.<\/p>\n<p data-start=\"5860\" data-end=\"5987\">Em telas pequenas, normalmente \u00e9 melhor utilizar um\u00a0<strong data-start=\"5912\" data-end=\"5926\">menu m\u00f3vel<\/strong>, muitas vezes representado pelo famoso \u00edcone de tr\u00eas linhas.<\/p>\n<p data-start=\"5989\" data-end=\"6001\">Verifica se:<\/p>\n<ul>\n<li data-start=\"6005\" data-end=\"6039\">O menu pode ser aberto facilmente;<\/li>\n<li data-start=\"6042\" data-end=\"6077\">Os links possuem espa\u00e7o suficiente;<\/li>\n<li data-start=\"6080\" data-end=\"6105\">O texto n\u00e3o fica cortado;<\/li>\n<li data-start=\"6108\" data-end=\"6139\">Os itens n\u00e3o ficam sobrepostos;<\/li>\n<li data-start=\"6142\" data-end=\"6200\">O menu fecha corretamente depois de selecionar uma p\u00e1gina.<\/li>\n<\/ul>\n<p data-start=\"6202\" data-end=\"6354\">Se o teu tema j\u00e1 possui um menu mobile, verifica as configura\u00e7\u00f5es do personalizador ou do construtor de p\u00e1ginas antes de adicionar c\u00f3digo personalizado.<\/p>\n<hr data-start=\"6356\" data-end=\"6359\" \/>\n<h1 data-section-id=\"jbv8u\" data-start=\"6361\" data-end=\"6397\"><span class=\"ez-toc-section\" id=\"7_Torna_os_botoes_faceis_de_tocar\"><\/span>7. Torna os bot\u00f5es f\u00e1ceis de tocar<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"6399\" data-end=\"6479\">Outro problema comum em sites n\u00e3o responsivos s\u00e3o bot\u00f5es e links muito pequenos.<\/p>\n<p data-start=\"6481\" data-end=\"6631\">No computador, clicar em um bot\u00e3o pequeno usando o mouse pode ser f\u00e1cil. No smartphone, tocar exatamente naquele pequeno elemento pode ser frustrante.<\/p>\n<p data-start=\"6633\" data-end=\"6720\">Por isso, os bot\u00f5es devem possuir espa\u00e7o suficiente para serem utilizados com os dedos.<\/p>\n<p data-start=\"6722\" data-end=\"6734\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">button<\/span> {\r\n    padding: <span class=\"\u037cy\">12<\/span><span class=\"\u037cv\">px<\/span> <span class=\"\u037cy\">20<\/span><span class=\"\u037cv\">px<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"6784\" data-end=\"6857\">Tamb\u00e9m evita colocar v\u00e1rios links pequenos muito pr\u00f3ximos uns dos outros.<\/p>\n<p data-start=\"6859\" data-end=\"6978\">Uma boa experi\u00eancia mobile n\u00e3o depende apenas de o elemento caber na tela, mas tamb\u00e9m de ele ser\u00a0<strong data-start=\"6956\" data-end=\"6977\">f\u00e1cil de utilizar<\/strong>.<\/p>\n<hr data-start=\"6980\" data-end=\"6983\" \/>\n<h1 data-section-id=\"uc51gz\" data-start=\"6985\" data-end=\"7032\"><span class=\"ez-toc-section\" id=\"8_Adapta_as_colunas_para_dispositivos_moveis\"><\/span>8. Adapta as colunas para dispositivos m\u00f3veis<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"7034\" data-end=\"7093\">Muitos sites utilizam tr\u00eas ou quatro colunas no computador.<\/p>\n<p data-start=\"7095\" data-end=\"7107\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>[ Coluna 1 ] [ Coluna 2 ] [ Coluna 3 ]<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"7161\" data-end=\"7211\">Em um smartphone, esse layout pode ficar apertado.<\/p>\n<p data-start=\"7213\" data-end=\"7273\">Uma solu\u00e7\u00e3o \u00e9 transformar as colunas em uma \u00fanica sequ\u00eancia:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>[ Coluna 1 ]\r\n\r\n[ Coluna 2 ]\r\n\r\n[ Coluna 3 ]<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"7329\" data-end=\"7377\">Com CSS, isso pode ser feito utilizando Flexbox:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">columns<\/span> {\r\n    display: <span class=\"\u037cy\">flex<\/span>;\r\n    gap: <span class=\"\u037cy\">20<\/span><span class=\"\u037cv\">px<\/span>;\r\n}\r\n\r\n<span class=\"\u037cv\">@media<\/span> (max-width: <span class=\"\u037cy\">768<\/span><span class=\"\u037cv\">px<\/span>) {\r\n    .<span class=\"\u037c10\">columns<\/span> {\r\n        flex-direction: <span class=\"\u037cy\">column<\/span>;\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"7522\" data-end=\"7616\">Essa t\u00e9cnica \u00e9 especialmente \u00fatil para p\u00e1ginas constru\u00eddas com diferentes blocos e containers.<\/p>\n<hr data-start=\"7618\" data-end=\"7621\" \/>\n<h1 data-section-id=\"1cvj825\" data-start=\"7623\" data-end=\"7647\"><span class=\"ez-toc-section\" id=\"9_Cuidado_com_tabelas\"><\/span>9. Cuidado com tabelas<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"7649\" data-end=\"7712\">As tabelas podem ser um grande problema em dispositivos m\u00f3veis.<\/p>\n<p data-start=\"7714\" data-end=\"7797\">Uma tabela com muitas colunas simplesmente pode n\u00e3o caber na tela de um smartphone.<\/p>\n<p data-start=\"7799\" data-end=\"7883\">Uma solu\u00e7\u00e3o \u00e9 permitir que a tabela tenha rolagem horizontal dentro de um container:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">table-container<\/span> {\r\n    overflow-x: <span class=\"\u037cy\">auto<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"7940\" data-end=\"8022\">Assim, o visitante pode deslizar apenas a tabela sem quebrar o restante do layout.<\/p>\n<p data-start=\"8024\" data-end=\"8133\">Quando poss\u00edvel, tamb\u00e9m considera simplificar tabelas muito complexas para melhorar a experi\u00eancia no celular.<\/p>\n<hr data-start=\"8135\" data-end=\"8138\" \/>\n<h1 data-section-id=\"blpu4o\" data-start=\"8140\" data-end=\"8171\"><span class=\"ez-toc-section\" id=\"10_Verifica_videos_e_iframes\"><\/span>10. Verifica v\u00eddeos e iframes<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"8173\" data-end=\"8271\">V\u00eddeos incorporados, mapas e outros conte\u00fados externos tamb\u00e9m podem ultrapassar a largura da tela.<\/p>\n<p data-start=\"8273\" data-end=\"8313\">Um iframe com largura fixa, por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">&lt;iframe<\/span> <span class=\"\u037c12\">width<\/span><span class=\"\u037cv\">=<\/span><span class=\"\u037cz\">\"800\"<\/span> <span class=\"\u037c12\">height<\/span><span class=\"\u037cv\">=<\/span><span class=\"\u037cz\">\"450\"<\/span><span class=\"\u037c13\">&gt;&lt;\/iframe&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8371\" data-end=\"8411\">pode causar problemas em telas pequenas.<\/p>\n<p data-start=\"8413\" data-end=\"8437\">Uma abordagem simples \u00e9:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">iframe<\/span> {\r\n    max-width: <span class=\"\u037cy\">100<\/span><span class=\"\u037cv\">%<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8483\" data-end=\"8606\">Dependendo do conte\u00fado incorporado, pode ser necess\u00e1rio utilizar uma estrutura espec\u00edfica para manter a propor\u00e7\u00e3o do v\u00eddeo.<\/p>\n<hr data-start=\"8608\" data-end=\"8611\" \/>\n<h1 data-section-id=\"1669l9l\" data-start=\"8613\" data-end=\"8641\"><span class=\"ez-toc-section\" id=\"11_Usa_unidades_relativas\"><\/span>11. Usa unidades relativas<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"8643\" data-end=\"8737\">Outro segredo para criar um site responsivo \u00e9 evitar depender excessivamente de valores fixos.<\/p>\n<p data-start=\"8739\" data-end=\"8765\">Em vez de utilizar apenas:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">width<\/span>: 500<span class=\"\u037c10\">px<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8793\" data-end=\"8808\">podes utilizar:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">width<\/span>: 100%;\r\n<span class=\"\u037c10\">max-width<\/span>: 500<span class=\"\u037c10\">px<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8853\" data-end=\"8882\">Tamb\u00e9m existem unidades como:<\/p>\n<ul>\n<li data-start=\"8886\" data-end=\"8889\"><code data-start=\"8886\" data-end=\"8889\">%<\/code><\/li>\n<li data-start=\"8892\" data-end=\"8896\"><code data-start=\"8892\" data-end=\"8896\">em<\/code><\/li>\n<li data-start=\"8899\" data-end=\"8904\"><code data-start=\"8899\" data-end=\"8904\">rem<\/code><\/li>\n<li data-start=\"8907\" data-end=\"8911\"><code data-start=\"8907\" data-end=\"8911\">vw<\/code><\/li>\n<li data-start=\"8914\" data-end=\"8918\"><code data-start=\"8914\" data-end=\"8918\">vh<\/code><\/li>\n<\/ul>\n<p data-start=\"8920\" data-end=\"9005\">Essas unidades podem ajudar os elementos a se adaptarem melhor ao tamanho dispon\u00edvel.<\/p>\n<p data-start=\"9007\" data-end=\"9019\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">container<\/span> {\r\n    width: <span class=\"\u037cy\">90<\/span><span class=\"\u037cv\">%<\/span>;\r\n    max-width: <span class=\"\u037cy\">1200<\/span><span class=\"\u037cv\">px<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"9087\" data-end=\"9090\" \/>\n<h1 data-section-id=\"1iqudyr\" data-start=\"9092\" data-end=\"9149\"><span class=\"ez-toc-section\" id=\"12_Verifica_o_Elementor_Gutenberg_ou_outro_construtor\"><\/span>12. Verifica o Elementor, Gutenberg ou outro construtor<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"9151\" data-end=\"9285\">Se utilizas construtores de p\u00e1ginas como Elementor ou outros sistemas de edi\u00e7\u00e3o visual, o problema pode n\u00e3o estar diretamente no tema.<\/p>\n<p data-start=\"9287\" data-end=\"9341\">Muitos construtores permitem configurar separadamente:<\/p>\n<ul>\n<li>Desktop<\/li>\n<li>Tablet<\/li>\n<li>Mobile<\/li>\n<\/ul>\n<p data-start=\"9375\" data-end=\"9421\">Por isso, verifica cada se\u00e7\u00e3o individualmente.<\/p>\n<p data-start=\"9423\" data-end=\"9455\">Presta aten\u00e7\u00e3o principalmente a:<\/p>\n<ul>\n<li data-start=\"9459\" data-end=\"9467\">Largura;<\/li>\n<li data-start=\"9512\" data-end=\"9519\">Altura;<\/li>\n<li data-start=\"9522\" data-end=\"9550\">Espa\u00e7amento entre elementos;<\/li>\n<li data-start=\"9459\" data-end=\"9467\">Margens;<\/li>\n<li data-start=\"9470\" data-end=\"9478\">Padding;<\/li>\n<li data-start=\"9481\" data-end=\"9498\">Tamanho da fonte;<\/li>\n<li data-start=\"9553\" data-end=\"9579\">Visibilidade de elementos.<\/li>\n<\/ul>\n<p data-start=\"9581\" data-end=\"9676\">\u00c0s vezes, uma configura\u00e7\u00e3o feita para desktop acaba causando um problema espec\u00edfico no celular.<\/p>\n<hr data-start=\"9678\" data-end=\"9681\" \/>\n<h1 data-section-id=\"7ko9n2\" data-start=\"9683\" data-end=\"9728\"><span class=\"ez-toc-section\" id=\"13_Nao_utilizes_demasiados_elementos_fixos\"><\/span>13. N\u00e3o utilizes demasiados elementos fixos<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"9730\" data-end=\"9842\">Elementos com\u00a0<code data-start=\"9744\" data-end=\"9761\">position: fixed<\/code>\u00a0ou\u00a0<code data-start=\"9765\" data-end=\"9785\">position: absolute<\/code>\u00a0podem causar problemas quando utilizados incorretamente.<\/p>\n<p data-start=\"9844\" data-end=\"9884\">Por exemplo, um banner fixo pode cobrir:<\/p>\n<ul>\n<li data-start=\"9888\" data-end=\"9895\">Bot\u00f5es;<\/li>\n<li data-start=\"9898\" data-end=\"9904\">Menus;<\/li>\n<li data-start=\"9907\" data-end=\"9913\">Texto;<\/li>\n<li data-start=\"9916\" data-end=\"9928\">Formul\u00e1rios;<\/li>\n<li data-start=\"9931\" data-end=\"9951\">Conte\u00fado importante.<\/li>\n<\/ul>\n<p data-start=\"9953\" data-end=\"10013\">Sempre testa esses elementos em diferentes tamanhos de tela.<\/p>\n<p data-start=\"10015\" data-end=\"10133\">Se utilizares pop-ups, barras fixas ou bot\u00f5es flutuantes, verifica especialmente o comportamento deles em smartphones.<\/p>\n<hr data-start=\"10135\" data-end=\"10138\" \/>\n<h1 data-section-id=\"1wsaqcy\" data-start=\"10140\" data-end=\"10196\"><span class=\"ez-toc-section\" id=\"14_Utiliza_o_Customizer_ou_CSS_adicional_do_WordPress\"><\/span>14. Utiliza o Customizer ou CSS adicional do WordPress<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"10198\" data-end=\"10313\">Se precisas adicionar pequenas corre\u00e7\u00f5es, muitas vezes n\u00e3o \u00e9 necess\u00e1rio modificar diretamente os ficheiros do tema.<\/p>\n<p data-start=\"10315\" data-end=\"10387\">No WordPress, dependendo do tema, podes encontrar uma \u00e1rea semelhante a:<\/p>\n<p data-start=\"10389\" data-end=\"10433\"><strong data-start=\"10389\" data-end=\"10433\">Apar\u00eancia \u2192 Personalizar \u2192 CSS adicional<\/strong><\/p>\n<p data-start=\"10435\" data-end=\"10474\">Ali podes inserir pequenos ajustes CSS.<\/p>\n<p data-start=\"10476\" data-end=\"10488\">Por exemplo:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@media<\/span> (max-width: <span class=\"\u037cy\">600<\/span><span class=\"\u037cv\">px<\/span>) {\r\n    .<span class=\"\u037c10\">site-content<\/span> {\r\n        padding-left: <span class=\"\u037cy\">15<\/span><span class=\"\u037cv\">px<\/span>;\r\n        padding-right: <span class=\"\u037cy\">15<\/span><span class=\"\u037cv\">px<\/span>;\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"de09ph\" data-start=\"10615\" data-end=\"10629\"><span class=\"ez-toc-section\" id=\"Importante\"><\/span>Importante<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"10631\" data-end=\"10734\">Evita editar diretamente os ficheiros do tema principal se n\u00e3o souberes exatamente o que est\u00e1s a fazer.<\/p>\n<p data-start=\"10736\" data-end=\"10790\">Uma atualiza\u00e7\u00e3o do tema pode substituir as altera\u00e7\u00f5es.<\/p>\n<p data-start=\"10792\" data-end=\"10929\">Quando for necess\u00e1rio modificar ficheiros, considera utilizar um\u00a0<strong data-start=\"10857\" data-end=\"10872\">child theme<\/strong>\u00a0ou um m\u00e9todo adequado para preservar as personaliza\u00e7\u00f5es.<\/p>\n<hr data-start=\"10931\" data-end=\"10934\" \/>\n<h1 data-section-id=\"1vcth5p\" data-start=\"10936\" data-end=\"10974\"><span class=\"ez-toc-section\" id=\"15_Testa_em_varios_tamanhos_de_tela\"><\/span>15. Testa em v\u00e1rios tamanhos de tela<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"10976\" data-end=\"11096\">Depois de fazeres as altera\u00e7\u00f5es, n\u00e3o assumes que o problema est\u00e1 resolvido apenas porque o site funciona no teu celular.<\/p>\n<p data-start=\"11098\" data-end=\"11124\">Testa diferentes larguras.<\/p>\n<p data-start=\"11126\" data-end=\"11138\">Por exemplo:<\/p>\n<ul>\n<li data-start=\"11142\" data-end=\"11161\">Smartphone pequeno;<\/li>\n<li data-start=\"11164\" data-end=\"11182\">Smartphone grande;<\/li>\n<li data-start=\"11185\" data-end=\"11192\">Tablet;<\/li>\n<li data-start=\"11195\" data-end=\"11204\">Notebook;<\/li>\n<li data-start=\"11207\" data-end=\"11222\">Monitor grande.<\/li>\n<\/ul>\n<p data-start=\"11224\" data-end=\"11319\">Tamb\u00e9m podes redimensionar manualmente a janela do navegador para observar como o layout reage.<\/p>\n<p data-start=\"11321\" data-end=\"11402\">O objetivo \u00e9 garantir que o conte\u00fado continue organizado conforme a largura muda.<\/p>\n<hr data-start=\"11404\" data-end=\"11407\" \/>\n<h1 data-section-id=\"188c310\" data-start=\"11409\" data-end=\"11447\"><span class=\"ez-toc-section\" id=\"16_Verifica_a_velocidade_no_celular\"><\/span>16. Verifica a velocidade no celular<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"11449\" data-end=\"11534\">Responsividade e desempenho est\u00e3o relacionados, mas n\u00e3o s\u00e3o exatamente a mesma coisa.<\/p>\n<p data-start=\"11536\" data-end=\"11598\">Um site pode ser responsivo e ainda assim carregar lentamente.<\/p>\n<p data-start=\"11600\" data-end=\"11655\">Por isso, depois de corrigir o layout, verifica tamb\u00e9m:<\/p>\n<ul>\n<li data-start=\"11659\" data-end=\"11679\">Tamanho das imagens;<\/li>\n<li data-start=\"11682\" data-end=\"11704\">Quantidade de plugins;<\/li>\n<li data-start=\"11707\" data-end=\"11718\">JavaScript;<\/li>\n<li data-start=\"11721\" data-end=\"11725\">CSS;<\/li>\n<li data-start=\"11728\" data-end=\"11734\">Cache;<\/li>\n<li data-start=\"11737\" data-end=\"11744\">Fontes;<\/li>\n<li data-start=\"11747\" data-end=\"11768\">Scripts de terceiros.<\/li>\n<\/ul>\n<p data-start=\"11770\" data-end=\"11887\">Um site r\u00e1pido proporciona uma experi\u00eancia muito melhor, principalmente para visitantes que utilizam conex\u00f5es m\u00f3veis.<\/p>\n<hr data-start=\"11889\" data-end=\"11892\" \/>\n<h1 data-section-id=\"se0imu\" data-start=\"11894\" data-end=\"11936\"><span class=\"ez-toc-section\" id=\"Ferramentas_para_testar_a_responsividade\"><\/span>Ferramentas para testar a responsividade<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"11938\" data-end=\"12004\">Existem v\u00e1rias ferramentas que podem ajudar a encontrar problemas.<\/p>\n<h3 data-section-id=\"th53qc\" data-start=\"12006\" data-end=\"12025\"><span class=\"ez-toc-section\" id=\"Chrome_DevTools\"><\/span>Chrome DevTools<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12027\" data-end=\"12160\">Permite simular diferentes dispositivos diretamente no navegador e verificar como os elementos se comportam em diferentes resolu\u00e7\u00f5es.<\/p>\n<h3 data-section-id=\"1j5ubke\" data-start=\"12162\" data-end=\"12191\"><span class=\"ez-toc-section\" id=\"Google_PageSpeed_Insights\"><\/span>Google PageSpeed Insights<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12193\" data-end=\"12294\">Pode ajudar a identificar problemas relacionados com desempenho e experi\u00eancia em dispositivos m\u00f3veis.<\/p>\n<h3 data-section-id=\"zfpizy\" data-start=\"12296\" data-end=\"12320\"><span class=\"ez-toc-section\" id=\"Navegador_do_celular\"><\/span>Navegador do celular<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12322\" data-end=\"12415\">Apesar das ferramentas autom\u00e1ticas serem \u00fateis, nunca subestimes um teste real no smartphone.<\/p>\n<p data-start=\"12417\" data-end=\"12524\">Um site pode passar em ferramentas autom\u00e1ticas e ainda apresentar uma experi\u00eancia ruim para usu\u00e1rios reais.<\/p>\n<hr data-start=\"12526\" data-end=\"12529\" \/>\n<h1 data-section-id=\"4yn223\" data-start=\"12531\" data-end=\"12562\"><span class=\"ez-toc-section\" id=\"Erros_comuns_que_deves_evitar\"><\/span>Erros comuns que deves evitar<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"12564\" data-end=\"12629\">Ao tentar tornar um tema WordPress responsivo, evita estes erros:<\/p>\n<h3 data-section-id=\"136ctz3\" data-start=\"12631\" data-end=\"12665\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Colocar_largura_fixa_em_tudo\"><\/span>&#x274c; Colocar largura fixa em tudo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12667\" data-end=\"12724\">Valores fixos podem fazer elementos ultrapassarem a tela.<\/p>\n<h3 data-section-id=\"1jeypvc\" data-start=\"12726\" data-end=\"12776\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Esconder_a_rolagem_horizontal_sem_investigar\"><\/span>&#x274c; Esconder a rolagem horizontal sem investigar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12778\" data-end=\"12829\">Isso pode mascarar o problema em vez de corrigi-lo.<\/p>\n<h3 data-section-id=\"1wz3dao\" data-start=\"12831\" data-end=\"12862\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Utilizar_imagens_gigantes\"><\/span>&#x274c; Utilizar imagens gigantes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12864\" data-end=\"12946\">Al\u00e9m de prejudicar o desempenho, imagens enormes podem causar problemas no layout.<\/p>\n<h3 data-section-id=\"106bghk\" data-start=\"12948\" data-end=\"12975\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Ignorar_o_menu_mobile\"><\/span>&#x274c; Ignorar o menu mobile<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"12977\" data-end=\"13039\">A navega\u00e7\u00e3o precisa funcionar perfeitamente em telas pequenas.<\/p>\n<h3 data-section-id=\"6ymgi1\" data-start=\"13041\" data-end=\"13076\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Utilizar_fontes_muito_grandes\"><\/span>&#x274c; Utilizar fontes muito grandes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"13078\" data-end=\"13144\">T\u00edtulos enormes podem ocupar v\u00e1rias linhas e prejudicar a leitura.<\/p>\n<h3 data-section-id=\"h0x403\" data-start=\"13146\" data-end=\"13201\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Fazer_alteracoes_diretamente_no_tema_sem_protecao\"><\/span>&#x274c; Fazer altera\u00e7\u00f5es diretamente no tema sem prote\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"13203\" data-end=\"13278\">Atualiza\u00e7\u00f5es podem apagar personaliza\u00e7\u00f5es feitas diretamente nos ficheiros.<\/p>\n<h3 data-section-id=\"ilvq31\" data-start=\"13280\" data-end=\"13314\"><span class=\"ez-toc-section\" id=\"%E2%9D%8C_Testar_somente_no_computador\"><\/span>&#x274c; Testar somente no computador<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"13316\" data-end=\"13399\">Um site pode parecer perfeito no desktop e estar completamente quebrado no celular.<\/p>\n<hr data-start=\"13401\" data-end=\"13404\" \/>\n<h1 data-section-id=\"1hb4q2f\" data-start=\"13406\" data-end=\"13456\"><span class=\"ez-toc-section\" id=\"Checklist_para_deixar_o_teu_WordPress_responsivo\"><\/span>Checklist para deixar o teu WordPress responsivo<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"13458\" data-end=\"13493\">Antes de publicar o site, verifica:<\/p>\n<ul>\n<li data-start=\"13497\" data-end=\"13534\">&#x2705; O conte\u00fado cabe na tela do celular?<\/li>\n<li data-start=\"13537\" data-end=\"13583\">&#x2705; N\u00e3o existe rolagem horizontal desnecess\u00e1ria?<\/li>\n<li data-start=\"13586\" data-end=\"13621\">&#x2705; As imagens diminuem corretamente?<\/li>\n<li data-start=\"13624\" data-end=\"13647\">&#x2705; Os v\u00eddeos se adaptam?<\/li>\n<li data-start=\"13650\" data-end=\"13675\">&#x2705; O menu mobile funciona?<\/li>\n<li data-start=\"13678\" data-end=\"13710\">&#x2705; Os bot\u00f5es s\u00e3o f\u00e1ceis de tocar?<\/li>\n<li data-start=\"13713\" data-end=\"13743\">&#x2705; Os textos s\u00e3o f\u00e1ceis de ler?<\/li>\n<li data-start=\"13746\" data-end=\"13774\">&#x2705; As colunas se reorganizam?<\/li>\n<li data-start=\"13777\" data-end=\"13811\">&#x2705; As tabelas funcionam no celular?<\/li>\n<li data-start=\"13814\" data-end=\"13841\">&#x2705; O cabe\u00e7alho est\u00e1 correto?<\/li>\n<li data-start=\"13844\" data-end=\"13871\">&#x2705; O rodap\u00e9 est\u00e1 organizado?<\/li>\n<li data-start=\"13874\" data-end=\"13906\">&#x2705; Pop-ups n\u00e3o cobrem o conte\u00fado?<\/li>\n<li data-start=\"13909\" data-end=\"13953\">&#x2705; O site foi testado em diferentes tamanhos?<\/li>\n<li>&#x2705; A velocidade mobile foi verificada?<\/li>\n<\/ul>\n<p>Se todas essas respostas forem positivas, o teu site estar\u00e1 muito mais preparado para diferentes dispositivos.<\/p>\n<hr data-start=\"14107\" data-end=\"14110\" \/>\n<h1 data-section-id=\"1g4xr35\" data-start=\"14112\" data-end=\"14123\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"14125\" data-end=\"14265\">Aprender\u00a0<strong data-start=\"14134\" data-end=\"14184\">como deixar qualquer tema WordPress responsivo<\/strong>\u00a0n\u00e3o significa necessariamente trocar de tema ou reconstruir todo o site do zero.<\/p>\n<p data-start=\"14267\" data-end=\"14464\">Na maioria dos casos, os problemas podem ser resolvidos identificando os elementos que ultrapassam a tela e ajustando corretamente\u00a0<strong data-start=\"14398\" data-end=\"14463\">larguras, imagens, fontes, colunas, menus, espa\u00e7amentos e CSS<\/strong>.<\/p>\n<p data-start=\"14466\" data-end=\"14624\">O mais importante \u00e9 n\u00e3o testar apenas no computador. O teu site precisa oferecer uma boa experi\u00eancia em smartphones, tablets e diferentes tamanhos de monitor.<\/p>\n<p data-start=\"14626\" data-end=\"14841\">Come\u00e7a pelos problemas mais evidentes, faz pequenas altera\u00e7\u00f5es e testa novamente. Dessa forma, consegues transformar um layout desorganizado em uma experi\u00eancia muito mais profissional e agrad\u00e1vel para os visitantes.<\/p>\n<p data-start=\"14843\" data-end=\"15000\" data-is-last-node=\"\" data-is-only-node=\"\"><strong data-start=\"14843\" data-end=\"15000\" data-is-last-node=\"\">Um site verdadeiramente responsivo n\u00e3o \u00e9 apenas aquele que cabe na tela \u2014 \u00e9 aquele que continua f\u00e1cil de ler, navegar e utilizar em qualquer dispositivo.<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"z-0 flex min-h-[46px] justify-start\"><\/div>\n<\/div>\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1\" data-conversation-screenshot-content=\"\">\n<div><\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<div class=\"pointer-events-none -mt-px h-px translate-y-(--scroll-root-safe-area-inset-bottom)\" aria-hidden=\"true\"><\/div>\n<div class=\"mt-auto grid\">\n<div class=\"col-start-1 row-start-1\">\n<div class=\"pointer-events-none translate-y-(--scroll-root-safe-area-inset-bottom) R6Vx5W_threadScrollVars min-h-(--gutter-remaining-height,0px) group-data-stream-active\/scroll-root:h-[calc(var(--thread-response-height)-16*var(--spacing))]\"><\/div>\n<\/div>\n<div class=\"sticky bottom-(--scroll-root-safe-area-inset-bottom,0px) col-start-1 row-start-1 self-end\">\n<div class=\"\" data-testid=\"thread-disclaimer\">\n<div class=\"min-h-9 pt-2 text-center text-xs text-token-text-tertiary [view-transition-name:var(--vt-disclaimer)] pb-4 relative overflow-hidden @w-sm\/main:px-[60px]\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"thread-bottom-container\" class=\"sticky bottom-0 z-10 group\/thread-bottom-container relative isolate w-full basis-auto has-data-has-thread-error:pt-2 has-data-has-thread-error:[box-shadow:var(--sharp-edge-bottom-shadow)] md:border-transparent md:pt-0 dark:border-white\/20 md:dark:border-transparent print:hidden pointer-events-none [--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] Ejxyja_threadFooterContentFade flex flex-col\">\n<div class=\"pointer-events-none\" data-thread-footer-overflow-spacer=\"\" data-testid=\"thread-footer-overflow-spacer\" aria-hidden=\"true\"><\/div>\n<div class=\"w-full\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 pointer-events-auto @[53.5rem]\/main:[--thread-content-max-width:48rem] w-full\"><\/div>\n<\/div>\n<\/div>\n<div class=\"pointer-events-auto relative mx-auto h-0\">\n<div class=\"flex h-0 items-end justify-center motion-safe:transition-all motion-safe:delay-300 motion-safe:duration-300 group-[:not([data-scroll-from-end])]\/scroll-root:scale-50 group-[:not([data-scroll-from-end])]\/scroll-root:translate-y-2 group-[:not([data-scroll-from-end])]\/scroll-root:opacity-0 group-[:not([data-scroll-from-end])]\/scroll-root:pointer-events-none group-[:not([data-scroll-from-end])]\/scroll-root:duration-100 group-[:not([data-scroll-from-end])]\/scroll-root:delay-0 absolute start-1\/2 z-10 -translate-x-1\/2 bottom-[calc(100%+3*var(--spacing)+var(--thread-scroll-to-bottom-banner-offset,0px))]\"><\/div>\n<\/div>\n<div id=\"thread-bottom\">\n<div>\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div>\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 mb-(--thread-component-gap,24px) pointer-events-auto\">\n<div class=\"w-full\">\n<div class=\"pointer-events-auto relative z-1 flex h-(--composer-container-height,100%) max-w-full flex-(--composer-container-flex,1) flex-col\">\n<div class=\"absolute start-0 end-0 bottom-full z-20\" data-prompt-textarea-header=\"\"><\/div>\n<form class=\"group\/composer w-full\" autocomplete=\"off\" data-type=\"unified-composer\">\n<div class=\"relative\">\n<div class=\"bg-(--composer-surface-primary) cursor-text overflow-clip bg-clip-padding px-2 py-[9px] contain-inline-size motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out group-not-data-expanded\/composer:min-h-[52px] group-not-data-expanded\/composer:py-[5px] grid grid-cols-[auto_1fr_auto] [grid-template-areas:'header_header_header'_'leading_primary_trailing'_'._footer_.'] group-data-expanded\/composer:[grid-template-areas:'header_header_header'_'primary_primary_primary'_'leading_footer_trailing'] max-sm:[grid-template-areas:'header_header_header'_'primary_primary_primary'_'leading_footer_trailing'] shadow-short-composer max-sm:not-dark:shadow-[0_0_0_1px_rgba(0,_0,_0,_0.04),0_2px_8px_0_rgba(0,_0,_0,_0.04),0px_4px_40px_8px_rgba(0,_0,_0,_0.025)]\" data-composer-surface=\"true\">\n<div class=\"self-center [grid-area:leading]\" data-composer-transition-slot=\"leading\"><\/div>\n<div class=\"-my-2.5 flex overflow-x-hidden ps-1.75 pe-1.5 [grid-area:primary] group-data-expanded\/composer:mb-0 group-data-expanded\/composer:ps-2.5 group-data-expanded\/composer:pe-2.5 min-h-14 items-center\">\n<div class=\"wcDTda_prosemirror-parent text-token-text-primary max-h-[max(30svh,5rem)] max-h-52 min-h-[var(--deep-research-composer-extra-height,unset)] flex-1 scroll-py-4 overflow-auto [scrollbar-width:thin] default-browser vertical-scroll-fade-mask group-data-[expanded-composer-mode-button]\/composer:pe-9\">\n<div id=\"prompt-textarea\" class=\"ProseMirror\" role=\"textbox\" contenteditable=\"true\" spellcheck=\"true\" translate=\"no\" aria-label=\"Chat with ChatGPT\" data-virtualkeyboard=\"true\" aria-multiline=\"true\">\n<p class=\"placeholder\" data-empty-paragraph=\"true\" data-placeholder=\"Ask anything\">\n<\/div>\n<\/div>\n<\/div>\n<div class=\"flex items-center gap-1 [grid-area:trailing]\" data-composer-transition-slot=\"trailing\">\n<div class=\"ms-auto flex items-center gap-2\">\n<div class=\"inline-flex\">\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/form>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"pointer-events-none fixed inset-x-0 bottom-[calc(var(--scroll-root-safe-area-inset-bottom)+1rem)] z-[100]\"><\/div>\n<\/div>\n<\/div>\n<div class=\"bg-surface-primary relative min-h-0 shrink-0 overflow-hidden ease-out motion-reduce:transition-none transition-[width] duration-300\" data-side-pane-shell-rail=\"true\">\n<div class=\"absolute inset-y-0 end-0 h-full\" aria-hidden=\"true\" data-side-pane-shell-surface=\"true\">\n<div class=\"h-full w-full\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<div id=\"aria-notify-live-region-assertive\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" aria-relevant=\"additions text\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Como deixar qualquer tema WordPress 100% responsivo Hoje, ter um site que funciona bem apenas no computador j\u00e1 n\u00e3o \u00e9 suficiente. Grande parte dos visitantes acessa sites usando\u00a0smartphones e tablets, por isso a responsividade tornou-se um dos pontos mais importantes de um bom site WordPress. Se o teu site apresenta textos cortados, imagens que ultrapassam [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"featured_image_src":"https:\/\/flowbase.co.mz\/blog\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-09_37_56-AM-3-600x400.jpg","featured_image_src_square":"https:\/\/flowbase.co.mz\/blog\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-09_37_56-AM-3-600x600.jpg","author_info":{"display_name":"Chelton Agude","author_link":"https:\/\/flowbase.co.mz\/blog\/author\/chelton-agude\/"},"_links":{"self":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":3,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions\/476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}