Our Picks to single column

[Nathan Explosion]

4 minutes ago, Jordan Invision said:

Perhaps someone here can simply help me figure out how to force each Our Picks content item to be the exact same size via custom.css. Any help there would be greatly appreciated 😇 

I must be missing something here - I posted this earlier in the topic:

Isn't that what you want? If not, draw us a picture.

[Jordan Miller]

5 minutes ago, Nathan Explosion said:

I must be missing something here - I posted this earlier in the topic:

Isn't that what you want? If not, draw us a picture.

Oh snap I missed it! This is awesome 🥲 Thank you for following up with the nudge.

One other thing that'd be super awesome...

To set X amount of words/characters before a '...' pops up so it can never be longer than two lines. I know it can be done manually when promoting, but it'd be nice to have it know to do that. 

Something like this:

 

 

[Meddysong]

13 hours ago, Jordan Invision said:

To set X amount of words/characters before a '...' pops up so it can never be longer than two lines. I know it can be done manually when promoting, but it'd be nice to have it know to do that.

It appears to be controlled by a line of code in core > front > promote > widgets > promoted:

<div class="ipsType_richText ipsType_medium ipsSpacer_both ipsSpacer_half" data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='4 lines'>{$text|raw}</div>

Change '4-lines' to '2-lines' to get the result you're looking for. (If you choose to go to 1 line, bear in mind that you would still use the plural: '1-lines'.)

[Nathan Explosion]

h2.cPromotedTitle{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

IMPORTANT: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

[Jordan Miller]

On 5/13/2021 at 1:36 PM, Nathan Explosion said:

I must be missing something here - I posted this earlier in the topic:

Isn't that what you want? If not, draw us a picture.

Hey again. Wondering, is it possible to apply this rule to work only when viewing from a desktop? But not on mobile? 

[Nathan Explosion]

 

@media screen and (min-width: 980px) {
	put your relevant rules in here
}

 

 

 

[Jordan Miller]

On 5/16/2021 at 3:34 PM, Nathan Explosion said:

 

@media screen and (min-width: 980px) {
	put your relevant rules in here
}

 

Hey there. I tried adding this code last night but I'm not sure it changed the Our Picks blocks on desktop to be the same height. Maybe I did it wrong? 😅

body[data-pageController='ourpicks'] div[data-role='patchworkItem'] div.cPromoted {
    border-width: 1px;
    border-style: solid;
    border-color: #232323;
}

@media screen and (min-width: 980px) {
	height: 450px;
    border-width: 1px;
    border-style: solid;
}

 

[Nathan Explosion]

 

Put the rule I gave you awhile ago inside the rule I gave you yesterday. I would draw you a pretty code box but I am on a phone.

 

On 5/16/2021 at 11:34 PM, Nathan Explosion said:

 

@media screen and (min-width: 980px) {
	 PUT THE BODY ONE IN HERE!!!!!
}

 

 

 

 

Edited May 18, 2021 by Nathan Explosion

[Meddysong]

Like this, @Jordan Invision:

@media screen and (min-width: 980px) {
    body[data-pageController='ourpicks'] div[data-role='patchworkItem'] div.cPromoted {
        height: 450px;
        border-width: 1px;
        border-style: solid;
        border-color: #232323;
    }
}

 

[Jordan Miller]

9 hours ago, Nathan Explosion said:

 

Put the rule I gave you awhile ago inside the rule I gave you yesterday. I would draw you a pretty code box but I am on a phone.

8 hours ago, Meddysong said:

Like this, @Jordan Invision:

@media screen and (min-width: 980px) {
    body[data-pageController='ourpicks'] div[data-role='patchworkItem'] div.cPromoted {
        height: 450px;
        border-width: 1px;
        border-style: solid;
        border-color: #232323;
    }
}

 

 

Ahhhh! 🥲 

Thank you both so much. It looks more uniform on desktop and mobile now. 🙏 

[Maxxius]

@Jordan Invision don't know if you saw it but there is an issue with reactions.

[Meddysong]

1 hour ago, Maxxius said:

@Jordan Invision don't know if you saw it but there is an issue with reactions.

It's a consequence of forcing the height rather than allowing it to flow. The content in each box isn't a consistent height, so in a case like this one

where you've got a longer title then three lines of the preview, you're going to need more vertical space than in other in other with less content.

Ultimately, Jordan's got to decide a) if he definitely wants to keep a consistent height, and b) what that height should be, knowing that if he chooses one to cover the most text-heavy-scenarios, there'll be plenty of empty space in smaller entries:

   

Personally, I think that if he wants to keep a consistent height, the smart thing to do is to say that the title can only occupy two lines maximum, and the preview three, and work it out from there.