Responsive Design Issue

Tagged: Responsive Design, text

This topic has 13 replies, 2 voices, and was last updated 9 years, 11 months ago by Sakin.

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

Author

Posts
November 12, 2014 at 9:32 am #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?

November 12, 2014 at 12:10 pm #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;
}
```
November 13, 2014 at 11:51 am #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!

November 13, 2014 at 11:13 pm #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;
    }
}
```
November 14, 2014 at 7:28 am #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?

November 16, 2014 at 8:38 am #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.

November 17, 2014 at 1:29 am #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!

November 17, 2014 at 5:52 am #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 */

November 21, 2014 at 2:35 am #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!

November 22, 2014 at 8:05 am #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.

November 22, 2014 at 10:53 pm #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

November 27, 2014 at 10:39 pm #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;
    }
}
```
December 18, 2014 at 3:59 am #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!

December 19, 2014 at 12:48 am #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;
    }
}
```
Author

Posts