Twenty Fourteen Header Image resize and position with CSS

  • thedesignflaw · Member ·

    Thank you in advance for your time. I do appreciate it.

    I’m relatively new to style sheets. What I’d like to know is what is the process, assuming it exists, to change the size and/or position of the header image in Theme Twenty Fourteen with CSS.

    I know where to add the CSS code, I just don’t know the code. ;)

    I do have a premium account.

    Thanks again!

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

  • thesacredpath · Member ·

    Hi there, I see you have a header image set on your site right now. If you could give us a little more detail on what you want to do with the header (enlarge, reduce) and the positioning, we can help you with that.

  • thedesignflaw · Member ·

    Hello and thank you for your response! You know, I found that I was able to get the image to span the entire width of the page as I’d hoped without CSS. I don’t know if the template changed, but the ideal picture resolution seemed to have changed after the first upload. I noticed this on one of the earlier themes I was trying.

    I do have another issue though, and that is in regards to the width of posts. I don’t know if It’s appropriate to ask that here now, or if I need to make a new thread, but what I would like to do is make the text of my posts take up more of the screen between sidebars, but still resize for mobile.

    Is there a way for me to do that with CSS? Do I need to repost this in a new thread so the answer will be searchable for the future?

    Thank you so much for your time, sacredpath.

  • thesacredpath · Member ·

    Hi there, generally it is best to start a new thread on a different issue, but give this is an easy fix, I’ll add it here.

    To widen the post content area, add the following and adjust the max width as desired. You can adjust to your liking and then add the same amount to the default “Content Width” show below the CSS edit area and enter that value in the box so full sized images and videos will use the new width.

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
max-width: 474px;
}
  • thedesignflaw · Member ·

    Hi TSP. Unfortunately that didn’t help me achieve my goal which is to increase the width of the TEXT of my posts and front page. That code when I played with it only seemed to effect the size of the videos, and even then I was really only able to shrink it. When I made the pixel space wider, say 1000pixels, then changed it in the pixel box below the CSS box, the video was taller and overscanned so that the sides of the video that spanned the width of the theme’s original 474 pixel space did not even show. It did not change the width of any pictures or text. Everything seems confined to the themes default width still. Sorry if I wasn’t descriptive enough initially.
    Thanks again!

  • thesacredpath · Member ·

    Hi, I just used the following to change the width of the posts to 874px.

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 874px;
}

    Before the above code: https://i.cloudup.com/lLPrVVnDpD.jpg
    After the above code: https://i.cloudup.com/kJyo9d6HyJ.jpg

    If that was not what you wanted, please let me know.

  • thedesignflaw · Member ·

    That is EXACTLY what I was going for. My only problem is either I’m missing something, or you have a magic touch, because my before and after look exactly the same. I triple checked to make sure I copied the whole of the code and pasted it between the /* */ symbols in the custom CSS section. I previewed it and it looked the same, saved it and it looked the same. I cleared my cache and even tried it on another computer and it looks the same. I’m so sorry to still be bothering you with something that seems to be so easy from your end, but I must be missing something…

  • thedesignflaw · Member ·

    I figured out what I was missing. Everything in between the /* is disregarded. Whoops.

    Thank you again for your time and help. I really appreciate it.

  • thesacredpath · Member ·

    Ah, yes, good sleuthing there and you are welcome.

    The /* and */ denote a comment and anything between those two are disregarded by the browsers.

  • The topic ‘Twenty Fourteen Header Image resize and position with CSS’ is closed to new replies.