0

So I'm building a mobile website using the WPtouch plugin for Wordpress.

I'm using an external CSS file to style certain elements of the site.

By default, the site displays the page title like this - "Home" "Shows" etc...

I would like to add something to CSS to make them display like this - "HOME //" "SHOWS //" etc.

I have used the following code in my CSS:

.post.page-title-area {text-transform:uppercase;}

.post.page-title-area:after {content: '//';}

However, this results in:

HOME
//

rather than

HOME //

Any idea why it would push the // onto the next line?


The site is - www.rjt-online.com (but it needs to be viewed on a touch screen phone)

3
Contributors
4
Replies
6
Views
7 Years
Discussion Span
Last Post by santoodesigner
0

Those items are probably contained within different "block" elements such as a div or p when the page is rendered. This will force a new line.
The page source will show you what is happenening.

0

So, after looking deeper at the code, the word "Home" is in a h2 tag, which is within a the post.page-title-area div.

So how would I incorportate that into my CSS to place the // after the Home text?

.post.page-title-area {text-transform:uppercase;}

.post.page-title-area:after {content: '//';}

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.