how to get the portfolio cards adjusted

Permalink Browser Info Environment
Hi Jordi! I love this theme, but I'm wondering if you can give me some pointers about how I can adjust the portfolio page list "cards" to display more than just the title of the pages (like the description) and also if it's possible to adjust the size a bit. Any pointers you have would be really great! Thanks.

Type: Discussion
Status: New
View Replies:
jordif replied on at Permalink Reply
jordif
Hi!

Try the following: go to Themes -> Long Way Home -> Customize theme. Paste the following line in the "Add your CSS" area:

ul.card-grid li p {display:block}


This should make the description visible (but unstyled). You can add other styles to that line of code if you want.

If you need further customization, i'd recommend having a look at the following how to:http://www.concrete5.org/documentation/how-tos/designers/modify-a-p...

As for adjusting the size, what page list are using ("Square Portfolio" or "Scattered Portfolio"). What size would you like them to be?

jordi
prboswell replied on at Permalink Reply
Thanks Jordi. Really appreciate this. My clients love this theme, and we need more info on the cards, so this is perfect. I don't think I need to make the scattered portfolio sizes bigger, if I can just style the text. I want only the page title and the description to appear and in smaller font. I'll look into the template customization to see if I can extract the file date and I should be good to go!. I'll be sure to post a link to this site when it's live!
prboswell replied on at Permalink Reply
Hi again, thanks to your tip, I was able to not only adjust the size of the cards in the Scattered Portfolio, but also to adjust the display of the properties pretty well. I added a link below and some of the CSS I used for that.

However, I'm noticing that on the mobile display, the writing on the cards doesn't scale and it gets cut off. Any tips about how I can make sure my CSS adjustments work for mobile too?

URL:http://www.donnerland.dreamhosters.com/index.php/listings/...

CSS Changed i've added:

body {
background: #000000;
}
.c5wrapper {
background-image:none;
}

ul.card-grid {
text-align: left;
font-size: 60px;
line-height: 0.1px;
}

ul.card-grid li p {display:block;
font-weight:bold;
font-family:georgia;
background: rgb(250,250,250);
background: rgba(250,250,250,0.4);
padding-right: 10px;
}

ul.card-grid li .page-list-description a span {
padding: 3px 6px 0 6px;
background: rgb(250,250,250);
background: rgba(250,250,250,0.4);
}

.page-list-description a span {
font-size:28px;}

.page-list-description p small {display:none}

.page-list-description a.read-more {color:#000000;}

ul.card-grid.scattered li div.page-list-item.tilted {
width: 230px;
height: 230px;
border: 5px solid white;
border-width: 5px 5px 30px 5px;
}

thanks, -patricia
jordif replied on at Permalink Reply
jordif
Hi Patricia!

I'm glad you could work it out. The theme uses CSS media queries to target mobile devices. That means you have to wrap your css rules with the following code to make it work only on mobile devices:

@media only screen and (max-width: 479px) { 
   /* any css rules you write here will only work on devices with a resolution under 480px */
}



So to make the description fit the new card size on mobile devices, adding the following code should work:


@media only screen and (max-width: 479px) { 
   ul.card-grid.scattered li .page-list-description {
      width: 200px;
   }
}


Hope that helps!

(by the way, your site look great, good job!)

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.