Issues with responsivness on small screens / smartphones

Fyi, When I delete all the images in a post, it seems to work fine. It seems the responsiveness norks untill the moment window is resized smaller then the largest image. Even though the image is resized properly, suddenly a scrollbar appears and when scrolling right, the black bar appears on the right side.

Hi Willem

Thanks for giving Ultra a try. As you might have noticed the theme is quite new. I’m still working hard on it so feedback is really appreciated.

Responsive Issues

I’m looking into this right now. Will revert ASAP.

Comments

Please find my disable comments tutorial here: http://purothemes.com/documentation/general-wordpress/disable-comments/.

Summary: Global comment settings are at Settings > Discussion. Those only apply for new posts. For existing posts, edit the post, click Screen Options top right. Enable Discussion. Scroll down to below Visual tab and un-check the discussion options there.

Above doesn’t work. Click Pages or Posts in your main WordPress menu, click Quick Edit next to a post or page, there is a comment checkbox there.

Breadcrumb support is ready if you’d like to add one

I’ll have documentation up ASAP. Out of interest, if you’d like a breadcrumb to appear to the right of the page title, please install either WordPress SEO by Yoast and enable it’s breadcrumb feature OR install BreadCrumb NavXT.

Yoast SEO – Advanced SEO with real-time guidance and built-in AI

Breadcrumb NavXT

Two social menus are available

Out of interest the theme supports a social links menu in the top bar and footer. My first theme Puro uses the same system so you can check it’s documentation if you’re interested: http://purothemes.com/documentation/puro-theme/social-menu/.

Hey Misplon,

Thanks for the fast reply. I really like the theme. There is a lot of room for text and images. But there really is some issue with the responsiveness. It definitely has to do with the images. I tried using some responsive image plugins, such as RICG Responsive Images and made a new test post with only one image and the post also has the same issue. When I make a post with no images, all works well as expected.

Let me know if I can do anything to help you figure this out.

Are you able to reproduce the issue?

Grtz

Willem

Thanks again for taking the time to contribute here. Please could you try testing the following in your Custom CSS plugin:

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

That seems to resolve the challenges we’re seeing, in my testing at least. Let me know how it goes. With this in place you should be able to return image max-width back to 100%.

Hye Misplo,

I tried your suggestion of custom css, but I don’t see an immediate improvement (with clearing of cache). Thanks for looking into this so fast.

Grtz

Willem

Misplo,

Did you also notice the issue with the sitename? Check http://outsideit.net and resize as small as possible. The siename outsideIT starts wrapping vertically very fast.

Grtz

Willem

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

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

No problem Mistlon,

Well I tested again and indeed the responsivness problem caused by the images is solved in Chrome. In Firefow your latest suggestion does not fix it yet.

Also, the fix for the sitename issues seems to make it a litle better, but it’s still not like it should be though. Take your time in solving it, I’m in no hurry. It’s already good to know you are working on it and actively maintaining the theme. I’ve used the journalims theme for two years and I’m planning to migrate to Ultra for some time.

Grtz

Willem

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.

Seem your new custom css fixes the image issue. It works on Firefox and Chrome. On IE it seems to have some mall issue left, but Idon’t really care about ie. It’s only when resized very small. It also works fine on my smartphone now.

The site name issue is much better, but when resized very small the last ‘T’ of OutsideIT is still wrapped.

But your solution is really sufficient for me to continue using your theme. Thanks for the fast help. You have a Github account? Mine is http://github.com/willemdh

Grtz

Willem

Hey,

I found another small issue. When resizing to smaller size, the left marge sticks to the text. Just resize from left to right and you’ll see it. There should be a few pixels white at least.

Grtz

Willem

Thanks for all the testing Willem.

Please let me know if you’d like to look at the IE problem, I’ll dive in then.
I’ll take another look at making the site title more flexible. Glad to hear the hotfix will work in the very short term. Update to follow.

I’m at: https://github.com/Misplon. Not too much going on there though.

Thanks for raising the margin issue. It’s ben resolved for 0.9.4. To hotfix, please add the following:

.site-content > .container {
  padding: 0 1.78571em;
}

Thanks 🙂

No problem Misplon. Thank you for making the theme and leaving me more time to do more research on monitoring and adding site content. It seems adding

.site-content > .container {
  padding: 0 1.78571em;
}

solves the left margin issue. The only issue left is the site name wrapping on small sized windows. There is definitely enough room left to not wrap it at all, as the menu is collapsed to a small icon.

Grtz