CSS to add width to main page portfolio

  • Unknown's avatar
    mboddington11 · Member ·

    Hi all,

    I have a piece of css (#primary {width: 100%;}) that is spreading the portfolio that I have set as the mainpage across the whole screen here, but this throws the position off for the other portfolios that are set as individual posts (example). It also causes issues when viewing on mobile/tablet as well.

    Is there a way to reference only the main page portfolio without affecting the others?

    Thanks in advance

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

  • staff-loquaciousloon · Staff ·

    You can target the style using the page’s ID to isolate it:

    .page-id-52 #primary {
	width: 100%;
}

    How to find page IDs

    You also mentioned issues on mobile – I didn’t see any mobile issues being caused by this style, but this one (from your CSS) is likely giving you trouble:

    div .portfolio-featured-image img {
	width: 100%;
	height: 220px;
}

    That’s giving all of the images a uniform height, which makes them stretch and become distorted in some cases. To avoid that, I’d recommend removing this style, and make sure your images are the same height (or at least the same aspect ratio) before you upload them :)

  • The topic ‘CSS to add width to main page portfolio’ is closed to new replies.