Portfolio CSS that doesn't break the page with a specific screensize?
-
Hi! First, let me apologize, because I’m not very knowledge about CSS, but in speaking to a wordpress support person over chat, he said that a change with the CSS could solve my problem. I’m using Ovis– a theme that utilizes portfolios, and I like the way the homepage looks like a collage of featured images, each linking to content. When I edit the portfolios, though, I’m using text as well as images, and it is all scrunched to the left column, instead of taking up the whole page.
The support person helping me explained that “The theme is set to use Featured Images that are 924px wide with unlimited height”, which is causing this problem, and I need “the CSS that doesn’t break the page with a specific screensize.” He tried a few options without success, but suggested that someone in the forums could help. I don’t know enough about CSS to try this on my own, but I’d be so grateful if someone could help walk me through it.
Long story short– I want to display portfolios linked to featured images on the homepages that actually look like pages in that they have content (text and image) that takes up the whole width of the screen. Thank you!!!
The blog I need help with is: (visible only to logged in users)
-
On a page set to the Portfolio page template, we can’t add the text content to the images. CSS. That information is not in the page, and CSS is a styling document used by browsers to style and position the elements in a web page. It cannot be used to add functionality that isn’t there already.
I would suggest starting an new draft page and then play with the Portfolio Shortcode, which gives you the option of showing content and setting the number of columns you wish to use and see if this would do the trick for you.
Below is a starting point for your shortcode, but read through the above linked support page for more information.
[portfolio display_types=true display_content=true columns=1 showposts=10]After adding the shortcode, save the draft but don’t publish it and you can use the Preview button in the editor to see what that page will look like.
-
Hi there,
From what I understand, I think you want to make the text in the portfolio project to use the whole width of the screen right?
To do that try this:@media screen and (min-width: 1020px)
.portfolio-content {
width: 900px;
}.portfolio-content {
float: none;
}That puts the image at the bottom and to the right, to center it, use:
@media screen and (min-width: 896px)
.portfolio-media {
float: none;
}I hope this helps
-
Thanks so much for the help! I can’t get it to work, but I may try a new theme instead– I think the portfolio function of this theme might not be meant for what I’m trying to achieve. I appreciate your efforts to assist though! Thanks again!
-
@wmunewplayproject, if you can explain what you are trying to accomplish with your site, perhaps we can come up with some suggestions or ways to accomplish what you are wanting.
- The topic ‘Portfolio CSS that doesn't break the page with a specific screensize?’ is closed to new replies.