Minimum Window Width Required to View Content

Tagged: content, Window width

Viewing 7 posts - 21 through 27 (of 27 total)

← 1 2

Author

Posts
December 19, 2014 at 3:48 pm #162655

XOR LX
Member

P.S. So is there no one way of wrapping text which WordPress have certified will work for ALL browsers? Surely this is a relatively common request in the blog world (?)

Regards

December 19, 2014 at 3:55 pm #162656

XOR LX
Member

Ok. I couldn’t find that particular section in my version.

I went to Tools/Extensions and saw that I had the following enabled:

Google Docs 0.7
iLivid 1.1

I have now disabled both.

Will I now need to close and re-open my browser to see the result of these changes?

Many thanks for your patience.

Regards

December 19, 2014 at 4:18 pm #162658

Kathryn P.
Happiness Engineer

P.S. So is there no one way of wrapping text which WordPress have certified will work for ALL browsers?

What tags work in which browsers isn’t something WordPress can control or guarantee. CSS and HTML support is something that’s unfortunately out of our hands! What we can do is provide you with resources to help determine which CSS is supported in which browser, like the useful http://caniuse.com/ site I pointed to earlier. If you need specific CSS help, you are also welcome to post in the CSS Customization forum:

http://en.forums.wordpress.com/forum/css-customization

Surely this is a relatively common request in the blog world (?)

I haven’t actually had this issue come up before. :-)

Will I now need to close and re-open my browser to see the result of these changes?

You could restart your browser to be safe.

December 19, 2014 at 4:28 pm #162659

XOR LX
Member

Many thanks. I will monitor the situation over the next few days after making those browser changes and see if the issue reoccurs at any point.

Re the wrapping, I just experimented with replacing all occurrences of “word-wrap” with “overflow-wrap” in one of my posts. I then viewed in Firefox but, unfortunately, there was no improvement: the pre boxes still run right off the edge of the screen without any wrapping.

Should I raise this issue in a CSS forum now and close this one?

Thanks and regards.

December 19, 2014 at 4:35 pm #162660

Kathryn P.
Happiness Engineer

You could certainly try posting in the CSS forums to see if someone can help you find a cross-browser solution for wrapping.

This topic in another forum says that wrapping within a pre tag in Firefox is problematic, and suggests using a div instead. That’s something you could try testing with.

http://stackoverflow.com/questions/19869653/word-wrap-not-working-in-firefox-tried-everything

I asked earlier if there was a specific reason you used pre tags – perhaps a div tag could accomplish the same thing, if the wrapping works better?

I do still highly recommend stripping out all your inline CSS and just leaving your HTML as:

<pre>my stuff here</pre>

or

<div class="myclass">my stuff here</div>

…and putting your CSS into the CSS editor in the Customizer

Separating your HTML from your CSS will save you a huge amount of time, letting you make adjustments quickly to all tags or classes of the same type in one fell swoop, rather than one at a time. If you need any help with that part, let me know.

December 19, 2014 at 4:42 pm #162661

XOR LX
Member

Thanks. I appreciate your support.

Your recommendation sounds like a good idea. Unfortunately, I’m not quite sure what you mean by “stripping out all your inline CSS and just leaving your HTML as…”?

And what CSS exactly do I put in the CSS editor?

I will have a look at this div option as well; perhaps post in the CSS forum.

Again, many thanks for your time.

Regards

December 19, 2014 at 6:50 pm #162663
Kathryn P.
Happiness Engineer
Sure, let me try to explain a bit further.

Let’s say you do find a solution for the word-wrapping issue and you decide to keep your elements in pre tags.

You would head to your custom CSS editor, under Appearance > Customize > CSS, and add all the CSS you want to apply to your pre tags. For example, this CSS would apply some padding and apply a grey border to anything in pre tags:
```
pre {
  padding: .1em .5em .3em .7em;
  border: 2px solid #ccc;
}
```
Here’s what it looks like in the custom CSS editor:

You only need to do this part once, and it will apply to all your pre tags at once.

If you come back later and decide that you want your grey borders to be red instead, for example, you’d only need to make the change once in the custom CSS editor, and it would automatically update all text within pre tags on your site.

As far as the pre tags go, this is what you would put in the post editor, for example:
```
{0,0,2,0,3,2,1,0,8,8}
```
You would not add any inline CSS to the pre tags in your post editor.

You can also use the Visual Editor to apply the pre tag to your words, instead of manually adding it in Text view, as you can see here:

If you go with a div instead like this in your post editor:

<div class="myclass">my stuff here</div>

you could put this in your custom CSS editor:
```
.myclass {
  padding: .1em .5em .3em .7em;
  border: 2px solid #ccc;
}
```
Anything with the class myclass would then have the padding and border formatting applied to it.

Just let me know if you have any other questions about this.
Author

Posts

Viewing 7 posts - 21 through 27 (of 27 total)

← 1 2

The topic ‘Minimum Window Width Required to View Content’ is closed to new replies.