How to make portfolio page float center

  • myogen · Member ·

    Hi ;-)

    In Obsidian Theme, the portfolio single project content are now left floating. Could you be so kind to help me center it, using CSS?

    Example page: https://torbenwestergaard.com/portfolio/stella-polaris-third-times-a-charm-samsara/

    Thanks /Stine

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

  • thesacredpath · Member ·

    Hi Stine, yes we can do that by removing the left float and then setting the left and right margins to “auto” like this. 

    .single-jetpack-portfolio #primary {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

    I’ve specifically targeted the single portfolio pages so that it doesn’t adversely affect any of the other page types.

  • myogen · Member ·

    Hi ;-)

    Thank you for providing the code and it (almost) works for me.
    It seems like too much is included though – the page title and the grey line is moved as well as the entry content. Is it possible to change that ?

    Thanks and Best
    /Stine

  • thesacredpath · Member ·

    Given the structure of the HTML and CSS, moving just the image and content, but then leaving the title and meta data below the title floated to the left would require a good bit of work to keep it working properly on all screen/window sizes. There are a number of Media Queries that would have to be reversed and then new ones created.

    Also, and this is just my opinion, leaving the title and metadata to the left while all the other content is centered within the browser window would look a bit odd.

  • myogen · Member ·

    Thanks for your help ;-)

    I am sorry, I think I am not explaining my self very well, so I will try to do better …

    Throughout the website all categories and category links are shown with a grey line beneath it, They are placed underneath the logo and are all centered.

    ( please see example: https://torbenwestergaard.com/portfolio/stella-polaris-third-times-a-charm-samsara/ )

    On the example page ‘Stella Polaris – SAMSARA’ … If I use the code you kindly provided, you will see it works for the single project but not for the category ‘PROJECTS’ and the line beneath. Instead of being centered both ‘PROJECTS’ and the line are moved to the right.

    My question is: Is it possible to use the code AND still have the category PROJECTS and the line centered ?

    Best regards
    /Stine

  • thesacredpath · Member ·

    Stine, on Stella Polaris… are you talking about the line and “Projects” above the actual content? I’m seeing the line and the category name centered above the content. Are you not seeing that? Here is a screenshot of what I see in Chrome, Safari and Firefox.

  • myogen · Member ·

    Yes that is exactly what i mean and I did find out how to center the line and “projects” but not in its full line width (like the line by the footer). But I can live with how it is displayed now … ;-)

    Thanks for your patience!

    Best
    /Stine

  • thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘How to make portfolio page float center’ is closed to new replies.