Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #47323
    Jason
    Participant

    Hi. Thanks for all your assistance. I have 2 questions/issues:
    1. Sometimes when I create a post with a medium size photo to the right, when I access it on my phone (Windows Phone Lumia 928), what I see is a single column 1-2 letters wide going down the side of the photo to the left. Usually it’s the first 2-5 words after the photo, broken apart to fill in a small amount of space. I often have to change the layout of the post to have the photo on the left or center so it leaves enough of a gap so this doesn’t happen. Is there a way that I can prevent the text from being broken up like this when accessed in Responsive Design?
    Here’s an example: http://www.north-forks.com/the-wine-project/ It happens with the second photo (the one on the right).
    http://www.north-forks.com/a-sparkling-weekend/ On this page it’s not as “bad”, keeping 5 letters together at a time on my phone.

    2. When working with text, there is only 1 text size. If I want to change text size I need to change from paragraph to heading (I mention this part because I may be overlooking something). Some of the headings change all the text to caps. However, in the edit view everything looks great, it’s only once I publish (or preview) that I see the change. Is there any way to change this so I’m never writing in all caps?

    #47333
    Sakin
    Keymaster

    @Jason:

    1. It’s the image size, image alignment and the the text issue. If the image cannot get the full width then text will alight to it’s right. There is nothing much we can do about this. So, increasing the image size will be best.

    2. See the text sizes changes as per the heading and html codes. See this demo page http://catchthemes.com/demo/simplecatch-pro/html-elements/ . h3, h4, h5 and h6 headings transform text to uppercase. If you want to make it normal, then go to “Appearance => Theme Options => Custom CSS” box and add the following css.

    h3, h4, h5, h6 {
        color: #666;
        text-transform: none;
    }
    #47389
    Jason
    Participant

    Thanks Sakin! Question about #1 above:
    If it’s the image size, then what is the “optimal” image size to accomplish this? I resize my images so the long edge is 1500 pixels at 72ppi and then select medium. I thought “medium” set a standard size. What do I need to do to keep this from happening. Thanks so much!

    #47448
    Sakin
    Keymaster

    @Jason: Not sure about the size. Ok let’s try adding in the following css in “Appearance => Theme Options => Custom CSS” box. This will clear the text to bottom of the image.

    @media screen and (max-width: 767px) {
        #primary wp-caption  {
            display: block;
            float: none;
            margin: 0;
        }
    }
    #47477
    Jason
    Participant

    I’ve added multiple items to the Custom CSS box. can I just keep adding things to is there a way to create “new boxes” for each item?

    #47562
    Sakin
    Keymaster

    @Jason: Sorry I don’t get it what you mean. Yes, you can add Custom CSS as per your need. But I don’t get it what you mean by create new boxes.

    #47589
    Jason
    Participant

    Sorry for not being clear. I wasn’t sure if I needed a new Custom CSS box for each instance of code or if I could keep adding new code in the same box. I guess you answered that.

    Is there any way that I can notate the code to explain the purpose for when I look at it in 3 months and have no idea why it’s there?

    Thanks!

    #47623
    Sakin
    Keymaster

    @Jason: Yes you can keep note comment before each custom css. The format of taking note is will be as below:
    /* Your Note */

    #47838
    Jason
    Participant

    Hi Sakin,
    I added that last bit of CSS to move the images below the pictures in the Responsive Design mode – it didn’t seem to work. I’m still getting margins with just a handful of letters that are broken apart words.

    Other suggestions?
    As always, thanks so much!

    #47894
    Sakin
    Keymaster

    @Jason: Can you upload the screenshot in any photosharing site or in your site and add in the url here. So, that I can check the issue in details. Not sure what you mean by margin and broken apart words.

    #47910
    Jason
    Participant

    Sure Sakin.
    Here is a link to a page on my site with the screen capture from my phone – Windows Phone 928.
    north-forks.com/?p=1015
    There are two images, and the bottom is the worst. I posted them full size.
    As always, thank you for all the help and assistance!

    -Jason

    #48149
    Sakin
    Keymaster

    @Jason: try adding in the following css in “Appearance => Theme Options => Custom CSS”. This will make your image clear with center align.

    @media screen and (max-width: 768px) {
        img[class*="align"], img[class*="wp-image-"] {
            clear: both;
            display: block;
            float: none;
            margin: 0 auto;
        }
    }
    #49018
    Jason
    Participant

    Sakin,

    Sorry it took so long to get back on this. I’m not seeing any difference. The text is still being mashed up alongside the photo in some places and not others, so I get 2-3 letters stringing down the side of an image. It doesn’t happen on all my posts, just a couple, and tends to be some of the older ones.

    Is it possible that I needed to delete the first CSS change before I added this to the list?

    As always, so many thanks – and a Happy Holiday to you!

    #49063
    Sakin
    Keymaster

    @Jason: Not sure why it’s not working. Yes, you need to delete your previous css and add the following:

    @media screen and (max-width: 960px) {	
        img[class*="align"], img[class*="wp-image-"] {
            clear: both;
            display: block;
            float: none;
            margin: 0 auto;
        }
    }
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Responsive Design Issue’ is closed to new replies.