hero image

Responsiveness Is Broken in Blogojoy

Home Forums WordPress Themes Blogojoy Responsiveness Is Broken in Blogojoy

Forums WordPress Themes Blogojoy Responsiveness Is Broken in Blogojoy

PLEASE NOTE A RECENT CHANGE:
The forum is read-only. Please submit any support request here.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts

  • nate
    Member
    Member
    #29423

    Hello TeslaThemes,

    In certain-sized viewing ports, Blogojoy is not correctly responsive. IT does not wrap or resize text correctly on mobile — please see the attached screenshots.

    • it seems that anything over a certain number of characters in header tags (h1, h2, or h3) gets cut off instead of dynamically sizing and wrapping
    • the author information boxes on mobile pushes text outside of the screen
    • normal p tags do not wrap appropriately and half of the text gets cut out

    Please advise on how to fix these issues, or when a fix could be released!

    ALSO, on the Tesla Forums I cannot remove attachments with the edit post tool. I forgot to crop one of the images!

    Thanks, -Nate


    nate
    Member
    Member
    #29727

    Hello,

    I just wanted to follow-up on these issues. Is there any support available?

    Thanks,
    nate


    Anonymous
    Inactive
    Inactive
    #29728

    Hi add this in style.css file at the end:

    @media
    (max-width: 450px) {
    body {
    margin: 0;
    }
    .blog-entry .entry-footer {
    padding: 30px;
    }
    .blog-entry .entry-footer .author-avatar {
    position: relative;
    margin: 0;
    }
    .blog-entry .entry-footer .author-avatar img {
    margin: 0 auto 10px;
    }
    .box {
    padding: 20px;
    }
    .blog-entry .entry-header {
    margin: -20px -20px 20px;
    }
    .comments-area .ul-comments .comment-block {
    padding-left: 10px;
    padding-bottom: 10px;
    }
    .comments-area .ul-comments .comment h4 {
    min-height: 75px;
    }
    .content .box img, .content .box iframe {
    margin-bottom: 20px;
    }
    }


    nate
    Member
    Member
    #30021

    Hey Michael, thanks for the reply. This CSS code fixed the issues on most screens, but there are a few (like iPhone 4 or iPhone 5) where the header overflow is still present. This applies to both h1 and others (or at least h2). Any suggestion for a fix here?

    I’ve attached another screenshot. Thanks!


    Anonymous
    Inactive
    Inactive
    #30196

    Hi, on what page? does this happen, you have to add to that title, word-break: break-all;


    nate
    Member
    Member
    #30780

    Hi Michael,

    sorry for the delayed response. this happens on every post page at the moment — I would add this snippet to my stylesheet right? to which element should I add word-break: break-all?

    Thanks again for your help!
    -nate


    Anonymous
    Inactive
    Inactive
    #30797

    Hi there,

    Please try to add to Custom CSS from our framework the following rule :

    .entry-header h2{word-break: break-all;}

    Notice : do not change any theme files from the parent theme as they will get overwritten to the next theme update, please add all the custom CSS to the :

    https://drive.google.com/a/red-sky.pl/file/d/0B11RflJnvBkjbU5lN3hvVkd6Snc/view?usp=drivesdk

    Best Regards


    nate
    Member
    Member
    #31598

    Dear Michael,

    I tried to apply the snippet you recommended, and found either 1. no effect or 2. a breaking effect that is splitting headers right down the middle of their words. Please see the attached screenshot for an example of what I mean.

    Do you have any fix recommendations? Thank you!


    Anonymous
    Inactive
    Inactive
    #32043

    Hi there,

    Sorry for delay, can you please try to use the word-wrap: break-word; ?

    Regards

Viewing 9 posts - 1 through 9 (of 9 total)

Responsiveness Is Broken in Blogojoy

Home Forums WordPress Themes Blogojoy Responsiveness Is Broken in Blogojoy

[i]
[i]
[i]
[i]