- This topic has 30 replies, 3 voices, and was last updated 8 years, 6 months ago by
Andrew Misplon.
Tagged: comments responsive ultra
- AuthorPosts
- April 16, 2015 at 9:56 pm #1191April 16, 2015 at 10:21 pm #1193
Willem D’HaeseParticipantFyi, 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.
April 16, 2015 at 10:32 pm #1197
Andrew MisplonKeymasterHi 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: https://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.
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: https://purothemes.com/documentation/puro-theme/social-menu/.
April 16, 2015 at 10:40 pm #1198
Willem D’HaeseParticipantHey 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
April 16, 2015 at 10:47 pm #1199
Andrew MisplonKeymasterThanks 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%.
April 16, 2015 at 10:53 pm #1200
Willem D’HaeseParticipantHye 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
April 16, 2015 at 10:58 pm #1201
Willem D’HaeseParticipantMisplo,
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
April 16, 2015 at 11:20 pm #1202
Andrew MisplonKeymasterAhh 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; } }
April 16, 2015 at 11:28 pm #1203
Andrew MisplonKeymasterHi 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
April 16, 2015 at 11:33 pm #1204
Andrew MisplonKeymasterHi 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
April 16, 2015 at 11:37 pm #1205
Willem D’HaeseParticipantNo 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
April 17, 2015 at 12:17 pm #1206
Andrew MisplonKeymasterThanks 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.
April 17, 2015 at 4:45 pm #1207
Willem D’HaeseParticipantSeem 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
April 17, 2015 at 6:32 pm #1208
Willem D’HaeseParticipantHey,
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
April 17, 2015 at 9:03 pm #1209
Andrew MisplonKeymasterThanks 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 🙂
- AuthorPosts
You must be logged in to reply to this topic.