Back to Community
Home / Community / Theme → Twenty seventeen

Troubleshooting Common Mobile Responsive Issues in Twenty Seventeen

25 threads Sep 9, 2025 Theme → Twenty seventeen

Content

Many users of the Twenty Seventeen theme report issues with how their site displays on mobile devices. These problems can range from text and logos being cut off, images and videos appearing too large, to layout elements not scaling correctly. This guide will help you diagnose and fix the most common mobile responsiveness problems.

Why Do These Mobile Issues Happen?

The Twenty Seventeen theme is built to be responsive. However, these issues frequently arise not from the theme itself, but from customizations. Adding custom CSS, large media files, or using page builder plugins can sometimes override or conflict with the theme's built-in responsive design rules. Common triggers include:

  • Custom CSS: Font sizes, image widths, or element dimensions defined without responsive media queries.
  • Large Media: High-resolution images or embedded videos that aren't optimized for mobile.
  • Third-Party Plugins: Plugins, especially page builders, may inject code that isn't fully responsive.
  • Browser Caching: Old versions of your site's CSS might be stored on your device.

Common Problems and Their Solutions

1. Text, Logos, or Titles Being Cut Off or Too Large

This is often caused by fixed font sizes or dimensions set in custom CSS.

Solution: Use responsive CSS units and media queries. If you've made the title larger, wrap that custom CSS in a media query so it only applies to larger screens. For example:

@media screen and (min-width: 768px) {
    .site-title, .site-title a {
        font-size: 75px; /* Your large size for desktop */
    }
}
@media screen and (max-width: 767px) {
    .site-title, .site-title a {
        font-size: 32px; /* A more appropriate size for mobile */
    }
}

2. Images or Videos Not Resizing on Mobile

Images or videos that appear "gigantic" or bleed outside the screen on mobile are a frequent complaint.

Solution: Ensure your images have responsive CSS. The following rule is a good starting point to make images scale to the width of their container:

img {
    max-width: 100%;
    height: auto;
}

For embedded videos (like from YouTube), also try wrapping them in a container with the following CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

3. Layout or Alignment Not Working on Mobile

If image alignment (left/right) or other layout elements break on small screens, the theme's default mobile styles may be overriding them.

Solution: You can override the theme's mobile styles by using more specific CSS media queries. For example, to force right alignment on mobile:

@media (max-width: 480px) {
    img.alignright {
        float: right;
        margin-left: 1.5em;
    }
}

4. Google Reports Mobile Usability Issues (CLS, small text, touch elements)

Google may flag text as too small, links too close together, or report Cumulative Layout Shift (CLS).

Solution:

  • Avoid using small, fixed pixel (px) sizes for text. Use relative units like rem or em.
  • Ensure buttons and links have ample padding and margin to be easily tappable.
  • CLS is often caused by images without defined dimensions. Always include width and height attributes in your image tags.

General Best Practices

  • Use a Child Theme: Always make modifications in a child theme or the 'Additional CSS' section. This prevents your changes from being overwritten during a theme update and makes troubleshooting easier.
  • Clear Caches: After making changes, clear your site's cache and your mobile browser's cache to see the updates.
  • Test on Real Devices: Browser developer tools are great, but testing on actual mobile devices provides the most accurate results.

By methodically checking your customizations and applying these responsive principles, you can usually resolve most mobile display issues in the Twenty Seventeen theme.

Related Support Threads Support