Text size on mobile version
-
Hi
Please advise how to make text on the pages- posts on WP site smaller for mobile viewing. The text at 300% is ok for desktop viewing however too big on mobile version ?
I changed the COLOR of the body and titles if pages on the site and in desktop version both content and title if each page shows the change if colour. However when on mobile version only content changed colour not the title?
I also noticed when clicking/viewing a post the text reverts back to black ?
Looking forward tour advice
Thank you & kindest regards KatherineThe blog I need help with is: (visible only to logged in users)
-
You have checked the “Include this CSS in the Mobile Theme” option in the Appearance > Customize > CSS panel. Did you mean to apply all of your CSS to the mobile theme like that? One route to fixing the font issue would be to simply turn off the custom CSS for the mobile theme if you don’t want the customizations to apply there.
-
Thank you – designsimply I had not seen your reply via email.
I unchecked the box and yes the text is showing same size across the site. Please let me know if you can answer any of the following questions or if have to go tweaky for a quote ?
Thank you again– is it possible to change the text colour for mobile version, Even just one color across the site like aqua or orange ?
– I saw the mobile version of this site and how could I create a front cover similar to this with my menu for front page http://www.sociates.co.uk/?
I like the idea of photo in background with menu sections in front (ideally each menu item would be a different colour to reflect threads of light ?)– one question for desktop version the posts are showing in aqua with orange title but when click into post the text is black ? – what code do I need to put in to change this please ?
-
– is it possible to change the text colour for mobile version, Even just one color across the site like aqua or orange ?
Yes. You can target just the mobile version by starting CSS selectors with “.mobile-theme”
Here is a related help section: http://en.support.wordpress.com/custom-design/editing-css/#include-custom-css-in-the-mobile-theme
-
– I saw the mobile version of this site and how could I create a front cover similar to this with my menu for front page http://www.sociates.co.uk/?
For the record, here is a screenshot of the mobile version of that site: http://cl.ly/QrPq
I see that the menu there has a background image, white borders, and the link colors are white. Here is an example that will adjust the menu in the WordPress.com mobile theme to have those features. Note that this won’t stop the menu from being a drop-down menu. Note that you would want to change the url() image link to a different one. I used your header image as an example. You would also want to create a custom menu with one level and only a few options (like the example site you linked has). After that, you may want to make further adjustments, but this example will give you some idea of what is possible.
.mobile-theme #access ul.nav-menu { background: url(http://katherinebuzsaki.files.wordpress.com/2011/03/cropped-header3.jpg); } .mobile-theme #access ul li { padding: 0; } .mobile-theme #access a { padding: 1em 0; } -
ideally each menu item would be a different colour to reflect threads of light
Each menu item has a unique identifier. To target them, you would need to learn how to read the HTML for the page to find the identifiers and then you could use them to change the color for different menu items one at a time.
For example, here’s the first part of the “About” menu item’s HTML:
<li id="menu-item-1079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1079"><a href="http://katherinebuzsaki.com/about-2/">About</a>The unique identifier is id=”menu-item-1079″ and so you can target that item by starting a CSS selector like this:
#menu-item-1079If you wanted to target it just in the mobile theme, you would also add “.mobile-theme” to the front of the selector.
.mobile-theme #menu-item-1079Putting it all together, this example will turn the “About” menu item link color red:
.mobile-theme #menu-item-1079 > a { color: red; } -
– one question for desktop version the posts are showing in aqua with orange title but when click into post the text is black ? – what code do I need to put in to change this please ?
You’ve used the following custom CSS to turn post title colors orange and the text aqua:
h2 a { color: orange; } .entry p { color: #26FFFF; }The post entry class is slightly different on a single post page. It is “hentry” instead of “entry.” And the title is not a link, so using “h2” instead of “h2 a” would work in that case. Here is an example:
h2 { color: orange; } .hentry p { color: #26FFFF; } -
Hi
thank you so much repl, it was a nice surprise to see all the responses in one go – thank you !
Firstly on desktop site –
I managed to change the post entry so now Posts are in aqua and orangeWith reference to the title/links of the posts, please can you advise how I can make the click (hover) stay coloured as opposed to turning to black
I tried as a guess(incorrect!) to do #h2 a ul li a:hover { color: #990099;} I tried with and without the ‘a’ h2 … and either active or hover but the text still remains black ?The main navigation bar at the the top- when in original desktop mode the text for the main navigation bar ‘home’ – ‘about’ – ‘portfolio’ etc is really small I wanted to heighten the letters but as soon as try to increase fon size the menu goes off the page.
The welcome box -I tried to change the BUZSAKIStudio THREADS OF LIGHT into a lime colour however I was unable to change from the aqua ?
Ref: Mobile version
I was excited to see how I could start to change bow ever one quite confused and think it will take me too long.
I think the reason I liked look of ‘example page I sent to you (society) is because you could you only see an image in the background with a menu over the top which works well on mobile. I have not ventured to looking at other sites. But it is the transparent menu over an image that I like and of course simplicity.
Thank you so much for showing how to make the menu customised. Please advise is it because I have the posts on the front page that I cannot have a similar type of front page ?I also have not found how to make the text smaller
Thank you & Kindest Regards
-
Hi
I have been trying to change colour and text size for the mobile themeI did following code I order to change the title and text if each menu item option as below; however this code only the body/context of the menu item not the title – brand etc that has remained black and the rest aqua ? Thank you
-
Hi
With reference to the desktop version can you let me know regarding the following;
– under news I have another page called N&E posts list – I set this up as I recall one of WP team telling me if when creating a post I select a category (N&E …) and I had created a page – under category would be able to go to that page in the menu and would be able to see all the posts ticked under N&E category o. That page – have I misunderstood this ? I
I have set up page however when click in link on either the drop down menu bar at top.
(Under News) or on sidebar it does not link ?– change colour of text in welcome box
I have not been able to change the colour of the text for
BUZSAKIStudio THREADS OF LIGHT in the welcome box it’s stuck on aqua I would like to change to a lime green (matching the letters in the threads of light ) ?The cloud tag on the sidebar when on original desktop version has gone really miniscule I think it’s the default blue of WP site – this blue is also showing up in the ‘press archive section’ I like the colour however because of the colour background it is too faint is there anyway to make font bolder. I have been unsuccessful in finding the original codes for each of the menu items I found brand is 1070
Re mobile version as stated I would need to know the individual menu items codes /HTML ? 1070 et.c I tried in vain at weekend to try and decrease size of font in each page – the font had changed colour however the title for each page stayed in black despite me trying to add mobile-theme to the codes h2 etc
The titles of pages in both desktop version and mobile version are extra large sized font and have not been able to decrease in size.Thank you
-
thank you so much repl, it was a nice surprise to see all the responses in one go – thank you !
I do that because when multiple questions get asked in a row, it’s super helpful for me to break them apart into smaller chunks. It’s also really helpful to do it that way in case anyone wants to refer back to a question and topic (rather than reading a long thread, they could just see one chunk or a shorter thread). Also, if lots of questions get asked in a row and any back and forth conversation needs to happen, it get get a little messy if the questions are posted separately. This thread has turned into a long one! But I’ll try to separate out things as I start replying.
-
With reference to the title/links of the posts, please can you advise how I can make the click (hover) stay coloured as opposed to turning to black
I tried as a guess(incorrect!) to do #h2 a ul li a:hover { color: #990099;} I tried with and without the ‘a’ h2 … and either active or hover but the text still remains black ?If you wanted to change the title link hover color to orange, you could add this:
.entry-title a:hover, .entry-title a:focus { color: orange; }And if you wanted to change the hover link color for all links to orange, you would make the CSS less specific, like this:
a:hover, a:focus { color: orange; }Note that the 2nd example will only change hover link color as long as there aren’t any more specific CSS rules that override it. That means if you use that rule, and you still found some links were black when you hovered, then you would probably need to find the specific rule that’s causing the black color and override it in addition. This page has a good explanation:
http://www.htmldog.com/guides/css/intermediate/specificity/And this page explains it using Star Wars characters, which is kind of awesome, right? :)
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html -
The main navigation bar at the the top- when in original desktop mode the text for the main navigation bar ‘home’ – ‘about’ – ‘portfolio’ etc is really small I wanted to heighten the letters but as soon as try to increase fon size the menu goes off the page.
I searched just now and found this in your custom CSS:
#top div.main-nav a { font-size: 27px; color:aqua; }Looks like that increased the font size and I can still see the menu on the page, or were you trying to increase the menu font to larger than 27px?
-
The welcome box -I tried to change the BUZSAKIStudio THREADS OF LIGHT into a lime colour however I was unable to change from the aqua ?
Find this in your custom CSS:
#masthead span.description { font-size: 22px; color: aqua; }And change “aqua” to a different color.
-
Please advise is it because I have the posts on the front page that I cannot have a similar type of front page ?
The reason you can’t just switch the built in WP.com mobile theme to look exactly like http://www.sociates.co.uk/ is because the theme structures are built differently. It might be possible to make really dramatic changes with CSS only that can approximate the design, but it’s beyond the scope of this forum to do design spec work like that for you.
If you want to look into hiring a designer to see how much they would charge to make a design like that, try filling out this form to see what they say:
http://en.support.wordpress.com/customize-my-site/request-theme-customization/ -
I also have not found how to make the text smaller
Could you start a new help request for this question using the following form?
https://en.forums.wordpress.com/forum/css-customization/#postformWhen you post, make sure to always include a link to the post, page, or home page showing an example of the text you want to change. It also really helps if you include a really specific example, such as: “I want to change the body text size” or “I want to change the size of the text at the top of the home page that starts with ‘Bespoke Handwoven Lighted Textiles.'”
-
I have been trying to change colour and text size for the mobile theme
I did following code I order to change the title and text if each menu item option as below; however this code only the body/context of the menu item not the title – brand etc that has remained black and the rest aqua ?
In my earlier example, I didn’t think to include visited links. Also, the code menu structure looks different to me. It could have changed if you switched from a default menu to a custom menu. Either way though, try this example instead:
.mobile-theme #top ul li#menu-item-1079 a, .mobile-theme #top ul li#menu-item-1079 a:visited { color: blue; }Aside, the colors you’ve selected (aqua and orange) are quite difficult to read on the background image you’re using. You might consider using colors that have more contrast with the background or adding back a partially transparent background on the main content container so the light text colors you’ve picked are easier to read.
For example, find the “.container” rule in your custom CSS and try replacing the background line with this instead:
background: rgba(0, 0, 0, 0.4);In either case, a bit more work will be needed to adjust text colors for the ones that are still black or gray.
-
Hi thank you for replies and understand fully why done in this way, I hope you realise I was in no means criticising.
Re:
Welcome box I am sorry I was not very clear, – I would like to know the CSS for the BUZSAKIStudio,,,, which is under the header and above Bespoke…..which is in code 99ff0099?Thank you
-
Hi
Further to my reply yesterday, the CSS code (I found as changes the size of the text for which I would like to change the colour is.welcome-content {
font-size: 33px;
}
I tried to add in colour but didn’t make any difference I feel the colour Aqua is controlled by another CSS code which is nothing to do with the welcome box/content codes despite the size of text ?Thank you
-
Hi
With reference to the size /height of text in the main nav bar , I was referring to the comparison in size between the main menu item bar and the side bar (whose menu items text is much much bigger but finer ? )
- The topic ‘Text size on mobile version’ is closed to new replies.
WordPress.com Forums 