How do I fix my theme so that the CSS design reflects correctly on a mobile phone?

  • mchurdk · Member ·

    I can’t find how to update the CSS for my theme to be mobile

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, I’ve looked over your custom CSS, and I see a number of issues, and I suggest that we roll things back to just some basics and start from there, if that is OK with you. I can probably “hack” things and get it all to work, but “hacks” tend to come back and bite you later one.

    First off, copy all of your CSS out and into a plain text file so you have it for reference and then delete it and paste in the following, which are the ones that will not affect the layout or the content area. 

    nav {
    background-color: #fdc;
    font-family: "bilbo";
    font-size: 20px;
    text-align: center;
}
h1 {
    color: #eee;
    font-family: "nobile";
    text-align: center;
}
h2 {
    color: #fff;
    font-family: "nobile";
}
h3 {
    color: #bbb;
    font-family: nobile;
    font-size: 16px;
}
.site-info {
    background-color: #fcb;
}
#comments {
    background-color: #fcb;
}
footer#colophon.site-footer {
    background-color: #fcb;
}
.comments-area {
    background-color: #fcb;
}
#contact-submit {
    color: #fff;
}
a {
    font-size: 25px;
    padding-bottom: 15px;
    text-decoration: none;
}
a:link {
    color: #003;
}
a:visited {
    color: #677;
}
a:hover {
    color: #eee;
}
a.external:link {
    color: #eee;
    text-align: center;
}
a.external:visited {
    color: #677;
    text-align: center;
}
a.external:hover {
    color: #eee;
}

    Once you have that done, let’s start working on things to get it all to look the way you want it to. Let me know when you have that done.

  • mchurdk · Member ·

    Ok thank you!

    I have saved the CSS I was working with previously.

    Question, will this work for both my Samsung and my clients IPhone?

    If so, I think all I need to do now are 3 things:

    1) update the hover, active, link for the mobile navigation
    2) fix the color on the Contact Page submit button
    3) get the February Schedule PDF (Offerings Page) to be viewable both on the page and at the link included

    Are these possible?

  • thesacredpath · Member ·

    That is super!

    1) update the hover, active, link for the mobile navigation

    This allows you to change the hover text and background color on the touch/mobile menu. 

    .toggled-on .nav-menu > li a:hover, .toggled-on .nav-menu > ul a:hover {
    color: #22dd44;
    background: #225ddd;
}

    This allows you to change the current (active) menu item text color. 

    .nav-menu .current_page_item > a {
    color: #a222dd;
}

    2) fix the color on the Contact Page submit button

    This allows you to change the button background color and the bottom border color on that button. 

    button, input[type="submit"], input[type="button"], input[type="reset"] {
    background: #a222dd;
    border-color: #bbdd22;
}

    3) get the February Schedule PDF (Offerings Page) to be viewable both on the page and at the link included

    WordPress.com does not directly display PDF files, but you can use the Scribd service to embed the PDF in your page.

    Let me know how things go.

  • thesacredpath · Member ·

    Oh and about the different devices, yes, your site should view just fine on all mobile devices – phones and tablets, no matter which brand it is.

  • mchurdk · Member ·

    Great! Thank you so much for your help!

    One last thing, the background banner image in the header doesn’t fill the entire background in the mobile header. How can I target that to resize for the mobile theme?

  • thesacredpath · Member ·

    We have a couple of options. The first will make sure the image covers the entire area down to the smallest screen, but it does distort the image. 

    .site-header {
    background-size: 100% 100%;
}

    The other option, since your header image is more graphic-like in nature, would be to set it to tile vertically using the following instead. 

    .site-header {
    background-repeat: repeat-y;
}

    Give both a try and narrow down your browser window to see what things look like. Each gives a different look to things.

  • The topic ‘How do I fix my theme so that the CSS design reflects correctly on a mobile phone?’ is closed to new replies.