Issues with responsivness on small screens / smartphones

Ahh right, I see. Sorry, was just testing in Chrome, I see Firefox isn’t happy with the images. Chrome can be very forgiving/better behaved. With regards to word-break, let’s change that to include a wider set of vendor prefixes. Then with images, I’m still working on isolating the problem. I’ll send through feedback ASAP.

/* Paragraphs:
Should be able to delete after Ultra 0.9.4 */
p {
	-ms-word-break: break-all;
	     word-break: break-all;

	     // Non standard for webkit
	     word-break: break-word;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	        hyphens: auto;
}

Thanks for mentioning the site name. I have that resolved in 0.9.4. Will get that update pushed ASAP. Hopefully within the next 7 days. For now we can hotfix as follows:

/* Site Title:
Should be able to delete after Ultra 0.9.4 */
@media (max-width: 768px) {
.site-header .site-branding h1.site-title {
	font-size: 1.78571em;
  	line-height: 2em; } 
 }

Hi Willem

I’m unfortunately going to need to jump back in tomorrow with fresh eyes. I’m missing something at the moment, hopefully the problem will present itself when I take another look tomorrow. Sorry I couldn’t crack it this evening.

Chat then.

Thanks

Thanks for the wait and support. I think I’m there. The main issue in Firefox was that I wasn’t setting a width for the primary div when there was no sidebar present. In this situation Firefox sets the width equal to the content which in this case was the image width.

Please could you try removing all the Custom CSS we’ve added so far and try the following:

/* Ultra 0.9.3 Hotfixes - Remove After 0.9.4 */
/* Site Title */
@media (max-width: 1224px) {
.site-header .site-branding h1.site-title {
    font-size:2.28571em;
    line-height:1.5625em;
    line-height:normal
}
}

@media (max-width: 1024px) {
.site-header .site-branding h1.site-title {
    font-size:2em;
    line-height:1.78571em;
    line-height:normal
}
}

@media (max-width: 768px) {
.site-header .site-branding h1.site-title {
    font-size:1.78571em;
    line-height:2em;
    line-height:normal
}
}

@media (max-width: 768px) {
.site-header .site-branding h2.site-description {
    font-size:.92857em;
    line-height:1.92308em;
    line-height:normal
}
}

/* Paragraphs */
p {
    white-space:pre;
    white-space:pre-wrap;
    white-space:pre-line;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-hp-pre-wrap;
    word-wrap:break-word
}

/* Layout */
#primary {
    width:100%
}

@media (max-width: 1024px) {
.site-header .site-branding-container {
    max-width:50%
}
}

@media (max-width: 1024px) {
.main-navigation {
    max-width:50%
}
}

Hopefully that fixes the problems we’ve discussed. Let me know how it all goes.