Mobile CSS

  • Author
    Posts
  • #1517987

    genhandley
    Member

    Hello,

    I am trying to change the text size and line spacing on the excerpts (home page), posts and pages.

    I also would like to change the title size on the posts and pages.

    I have changed many aspects already on the full version, but I am not sure of the code needed to change just the mobile CSS.

    The blog I need help with is sixtyfiverosesblog.wordpress.com.

    #1518086

    You are using a responsive design theme, which means it adjusts to whatever screen size or device you are viewing it on and the theme retains the general look and feel of the full-sized site. I checked your dashboard and see that you do NOT have the mobile theme active. The .mobile-theme classes will only apply to the actual mobile theme (Appearance > Mobile).

    On a responsive width theme, the CSS uses @media rules which define CSS for minimum or maximum width values. In the theme you are using, there are two main @media changes. The first @media change happens at 900px width when the theme drops from 3 columns to 2 on the main page. The second happens at 765px when it drops to 1 column. That one remains in effect from there down to a smartphone size of 320px in width. If you are wanting to change font sizes down in the phone range, I would suggest something at 480px (phone in landscape). The following is a starting point for the responsive width theme you are using.

    @media screen and (max-width: 480px) {
    #content-wrap p, .block-titles p, .block-text p, .block-text{
    line-height: 20px;
    }
    .content-wrap p, .block-text p {
    margin-bottom: 3%;
    }
    .block-entry-title, .block-entry-title a {
    font-size: 90%;
    }
    }
    #1518100

    genhandley
    Member

    Thanks,

    I previously tried enabling the mobile theme, but then my title disappeared and the excerpts didnt show on the home page.

    I tried different combinations of the CSS above, but decided I preferred going back to the enable mobile theme state (less padding, easier to read-better paragraph formatting). I will mention the lack of blog title and the excerpts in the premium theme forum.

    #1518101

    genhandley
    Member

    I changed the title to the black option under mobile options, I think it was white before which was why it wasnt showing.

    #1518113

    Yay! Glad that is fixed for you. Let us know if you have further questions or problems.

    #1518121

    genhandley
    Member

    Back again,

    Wondering if anyone knows the CSS needed to change these aspects of the mobile theme (I have the mobile theme enabled & include this CSS in the mobile theme ticked)

    The colour of the blog title
    The colours of the post titles on the home page
    The colours of the post and page titles

    I tried this, but it didn’t work

    .mobile-theme .site-title a {
        color: #DA0D29;}

    I normally use inspect element but I dont think I can do this on my iphone (I dont have a mac)

    Thanks

    #1518122

    genhandley
    Member
    .mobile-theme .entry-header h1 {
        color: #DA0D29;}

    The code above succesfully changed the page title font colour. But I couldn’t figure out the code for the blog title and post titles (home page and full posts)

    #1518123

    genhandley
    Member

    Spoke to soon

    .mobile-theme .entry-title a {
        color: #DA0D29;}

    This just changed my title colour on the home page and the posts.

    Still would like to change the blog title colour and also the links (eg ‘continue reading’, dates, related posts, comment names) from blue to the same purple that I use for links in the posts.

    #1518124

    Hi there, the site title has its own styling and CSS id. Add this and then edit the (obnoxious) color code as desired.

    .mobile-theme #site-title a {
    color: #00ee55;
    }

    If you want to assign a hover color (when a mouse goes over the title, add this also and edit as desired.

    .mobile-theme #site-title a:hover {
    color: #cc00ee;
    }
    #1518132

    genhandley
    Member

    Thanks, that helped with the blog title.

    Is there a way to change the colour of the links (from the default blue?)

    #1518133

    Hi, add this to change the link color on the mobile theme.

    .mobile-theme a {
    color: #00dd33;
    }
    #1518140

    genhandley
    Member

    Thanks, that worked. I have one last question but I’ll start it in a new topic

    #1518141

    You are welcome.

The topic ‘Mobile CSS’ is closed to new replies.