Changing body alignment in Shine On theme

  • Unknown's avatar
    helenperri · Member ·

    Hello, I’m new to CSS editing. I’ve stumbled into some successful changes, but one basic change eludes me.

    The Header image in the site–the sewing notions photo at the top of the pages–stays centered no matter how one resizes the browser window. I’d like to match this feature on the content below the nav bar. Right now, the content below the nav bar stays aligned left, with some padding on the left margin. Without changing each paragraph’s text alignment (justified left), I’d like to center the content, art and text, within the browser window. How do I do this?

    Thanks in advance to anyone who can help me.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, give this a try. Add it at the very end of your existing custom CSS. 

    @media screen and (min-width: 1001px) {
	.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
		padding-right: 80px;
	}
}
  • Unknown's avatar
    helenperri · Member ·

    Dear Mr. Path,

    Thank you thank you! I’m very excited to have made some headway, thanks to your help.

    2 issues:

    (1) The text is too wide. I need it to be the same width as my artwork, 604px wide.

    (2) Now that I look at it, my nav bar is looking weird with everything else centered. How do I center the text on it?

    kateperridesigns.wordpress.com

  • Unknown's avatar
    helenperri · Member ·

    Addendum

    Re item 1 above, the text is the right width until I pull the browser window quite wide.

    It’s possible I can figure out the tweaks in the morning, but I blurted my questions anyway in case it’s not too much trouble to help. Thank you again. :-)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, we can do this, but first off, are you wanting all pages to have content width of 604px, or only your Home page?

  • Unknown's avatar
    helenperri · Member ·

    Hi thesacredpath, thanks for your response.

    I’d like all pages to have the content width of 604px. I’ve also noticed that the photo mosaics are shifted to the left, like on this page:
    https://kateperridesigns.wordpress.com/classes/studio-classes/
    I’d like them to be centered as well.

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks for the clarifications. Let’s replace what I had given you before with this. 

    @media screen and (min-width: 1001px) {
.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    padding-right: 60px;
    max-width: 724px;
    width: 100%;
}
}

    You will also want to enter 604 in the Media Width field below the CSS text entry area.

    The max width of 724px takes into account that there is 60px of left and right padding, so 604 + 120 = 724 which gives you a 604px wide content area.

    The images in the gallery will automatically resize to fit and the 604 Media Width will insure that all images that are set to full size, or any gallery will come in full width.

  • Unknown's avatar
    helenperri · Member ·

    You rock, sir. You’ve made a hero out of me. Now I have to learn how to do these things myself! Thank you so, so much.

    Please let me know of the unlikely event I can be of assistance. I know about vintage Airstream trailers, printing on various media, California points of interest, and a bit about vintage sewing machines. And vintage humans.

  • Unknown's avatar
    thesacredpath · Member ·

    Thank you very much, and you are welcome. I’ll keep you in mind of the vintage sewing machine. We have an old Singer fold-out that works great and still gets lots of use.

  • The topic ‘Changing body alignment in Shine On theme’ is closed to new replies.