Text, Title, Date, Comments Alignment and hover color on phone

  • Unknown's avatar
    serealities · Member ·

    My site has a lot of CSS changes in it over the past couple of years. I’m trying to make it look better on a phone rather than on a laptop.
    1. My pages are ok but my posts titles are not in line with the text as I would like. Not sure how to change the margin for post titles and leave the page titles as they are.
    2. How can I move the comments section on the pages and posts to be in line with the titles and text?
    3. How can I make the post date line up with the text?
    4. Also, is there any way to have the hover color show up on the phone when touched?
    Thanks!
    Anna

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. My pages are ok but my posts titles are not in line with the text as I would like. Not sure how to change the margin for post titles and leave the page titles as they are.

    Add this to the bottom of your custom CSS. 

    .single .entry-title {
    margin-left: 140px;
}

    2. How can I move the comments section on the pages and posts to be in line with the titles and text?

    Add this to the bottom of your CSS. 

    #comments {
    padding-left: 142px;
}

    3. How can I make the post date line up with the text?

    This is going to take a Media Query since things change at 600px and below, and I’ve made an adjustment to things above to align things on desktop as well. 

    @media screen and (max-width: 600px) {
.entry-meta {
left: 20px;
}
.single .entry-title {
margin-left: 20px;
}
.post-format-icon {
display: none;
}
}

    4. Also, is there any way to have the hover color show up on the phone when touched?

    No there is not.

  • Unknown's avatar
    serealities · Member ·

    Thanks!
    1. that worked for the Mac but it didn’t work for my iPhone. So on the phone the titles do not line up with the text. Is there something else we can add?

    2. I added this CSS but when I changed 142px to 20px, the Comments lined up. Now on my phone, the Comments section also has spaces for name, email and website. How can I get rid of those spaces and leave it with only one box for comments as it is on my Mac?

    3. This CSS did align the date for my phone. There is now a line on my website that I think we might have gotten rid of in the past. It is above the date in posts. It does not appear on my phone, only on Mac.

    Many thanks!!

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, that’s interesting. Add the !important keyword to the .single .entry-title left margin in the media query so it looks like this 

    .single .entry-title {
    margin-left:20px !important;
}
  • Unknown's avatar
    serealities · Member ·

    well, I tried it and it doesn’t seem to have changed any of these issues.
    :(

  • Unknown's avatar
    thesacredpath · Member ·

    I took a look in your customizer and the !important was not after the 20px value as shown above. I’ve added that for you and saved and on my iPhone 5s the title is aligned with the text on single post pages such as on this one: https://serealities.com/2016/02/01/loan-some-by-serealities-3/ .

    If you are not seeing that, or are not seeing that in a different place, please let me know where so that I can take a look.

  • Unknown's avatar
    serealities · Member ·

    Hey! You did good! My only problem now is trying to get the fonts to work like they are supposed to when I try to change them. I’m trying to change the font and font size for my titles. It is driving me crazy! When I change it it doesn’t look the same on the front page as it does on the post pages. I removed the title from the front page but still when I change the fonts, it even changes the size of the text that I use to create a title in the body of the front page. ugh :/ and I’m not sure how to lose the name, email, and website boxes from the comments section on my phone. That might be a question for WP support? and that may be true for the question concerning the font. I’ve sent an email to support about that part. Thanks so much!!!
    Anna

  • Unknown's avatar
    thesacredpath · Member ·

    I checked at Settings > Reading and you don’t have a “posts” page set there. On the single post pages, such as the one I mentioned above, this would be the CSS you would need to change the font size of the titles (33px is what it is now). 

    .entry-title {
    font-size: 33px;
}

    If you can point to places where you are having problems setting a font size, I can help you figure out the CSS.

  • Unknown's avatar
    thesacredpath · Member ·

    One other suggestion I would have, and this is only a suggestion is to add a bit of top margin to the #primary div so that the page titles are not so close to the bottom of the menu. This would be my suggestion. 

    #primary {
    margin-top: 20px;
}
  • The topic ‘Text, Title, Date, Comments Alignment and hover color on phone’ is closed to new replies.