[Jason]

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?

[Sakin]

@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;
}

[Jason]

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!

[Sakin]

@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;
    }
}

[Jason]

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?

[Sakin]

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

[Jason]

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!

[Sakin]

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

[Jason]

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!

[Sakin]

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

[Jason]

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

[Sakin]

@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;
    }
}

[Jason]

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!

[Sakin]

@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;
    }
}

[Author]

Posts