Issues with responsivness on small screens / smartphones

This topic contains 30 replies, has 3 voices, and was last updated by  Andrew Misplon 2 years, 10 months ago.

  • Author
    Posts
  • #1191

    Willem D’Haese
    Participant

    Hello,

    I’m having issues with the Ultra theme on smartphones and small windows. When the window is getting smaller then a certain size, a black bar appears on the right side of the website. Please check http://outsideit.net/naf_update_nsclient_scripts_folder/ for an example. Am I doing something wrong?

    I tried setting custom css

    img { max-width: 75%; height: auto; }

    But it doesn’t help. I also tried disabling comments, but it also didn’t help. Any help is highly appreciated.

    Greetings.

    Willem

    #1193

    Willem D’Haese
    Participant

    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.

    #1197

    Andrew Misplon
    Keymaster

    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: 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.

    Yoast SEO

    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/.

    #1198

    Willem D’Haese
    Participant

    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

    #1199

    Andrew Misplon
    Keymaster

    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%.

    #1200

    Willem D’Haese
    Participant

    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

    #1201

    Willem D’Haese
    Participant

    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

    #1202

    Andrew Misplon
    Keymaster

    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; } 
     }
    #1203

    Andrew Misplon
    Keymaster

    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

    #1204

    Andrew Misplon
    Keymaster

    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

    #1205

    Willem D’Haese
    Participant

    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

    #1206

    Andrew Misplon
    Keymaster

    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.

    #1207

    Willem D’Haese
    Participant

    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

    #1208

    Willem D’Haese
    Participant

    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

    #1209

    Andrew Misplon
    Keymaster

    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 🙂

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.

Scroll to top