Reply To: Asteroid Not responsive for iPad and iPhone

#4503
Ron
Keymaster
  • Sidebar goes under on smaller screen sizes.
  • Menu items stacked vertically on smaller screen sizes.

These actually indicate that the page is responsive. The only issue I think is the header background image being cut off. You’re using the header background image for content that might be better suited for a logo similar to what is done on this site.

If you want to force the header image to fit, you can add this on Asteroid Options -> Custom CSS

#header {
    background-size: 100% 100% !important;
}

Or you could remove the header image then use the same image for the logo which you could set on Asteroid Options -> Appearance Then add the css below on the Custom CSS tab.

#header {min-height: 0;}
#header-info-wrap,
#header-logo img {
    float: left;
    height: auto;
    max-width: 100%;
}