Back to Community
Home / Community / Theme → Sydney

Fixing Common Sydney Theme Mobile Responsiveness and Layout Issues

25 threads Sep 9, 2025 Theme → Sydney

Content

Many users of the Sydney WordPress theme encounter similar challenges when it comes to mobile responsiveness and layout control. Based on community support threads, here are the most common problems and their proven solutions.

Common Mobile Responsiveness Issues & Solutions

1. Slider Image Zooming or Incorrect Sizing on Mobile

A frequent issue is that slider images appear correctly on desktop but become overly zoomed or improperly sized on mobile devices. This often occurs due to fixed background attachment or lack of mobile-specific sizing rules.

Solution: Add the following CSS code to Appearance > Customize > Additional CSS:

.slides-container .slide-item {
    background-attachment: scroll !important;
    background-position: center !important;
}

Additionally, enable the theme's responsive header slider in Customize > Hero Area > Hero Slider > Slider mobile behavior.

2. Mobile Logo Appearing Too Small

Many users report their logo appears disproportionately small on mobile viewports despite looking fine on desktop.

Solution: Use this CSS media query to adjust logo sizing for mobile devices:

@media only screen and (max-width: 575px) {
    .site-branding {
        position: relative;
        /* Add your specific sizing rules here */
    }
}

3. Text Elements Too Large on Mobile

Slider text, buttons, and other text elements often appear too large on mobile screens, causing layout issues.

Solution for slider text:

@media only screen and (max-width: 680px) {
    .sydney-hero-area .slide-inner .maintitle {
        font-size: 16px; /* Adjust as needed */
    }
}

Solution for buttons:

@media only screen and (max-width: 769px) {
    .header-slider .button-slider {
        padding: 5px 10px;
        font-size: 12px;
    }
}

4. Unwanted Margins or Padding on Mobile

Unexpected margins or padding can appear on mobile versions, often caused by widget styling.

Solution:

.widget > .panel-widget-style {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

5. Sticky Menu Not Working on Desktop

Some users find the sticky menu feature doesn't function as expected, sometimes accompanied by unwanted white space at the top of the page.

Solution:

.mobile-header,
.sticky-header.sticky-scrolltop {
    width: 100%;
    position: fixed;
    top: 0 !important;
}

6. Form Elements Exceeding Boundaries on Mobile

Contact Form 7 and other form elements may overflow their containers on mobile devices.

Solution:

input, optgroup, select, textarea {
    max-width: 100%;
}

General Troubleshooting Tips

  • Always use a child theme when making customizations to prevent changes from being overwritten during theme updates.
  • Clear your cache after implementing CSS changes. This includes browser cache and any caching plugins you might be using.
  • Test responsive changes using your browser's developer tools to simulate different device sizes before pushing changes live.
  • Use media queries to target specific screen sizes when implementing responsive design changes.

These solutions address the most commonly reported mobile responsiveness issues in the Sydney theme. Remember that results may vary depending on your specific configuration, child theme usage, and other plugins that might affect styling.

Related Support Threads Support