Post by nnda in Pitch – CSS Components and Tweaks for Your itch.io Pages comments

Pitch – CSS Components and Tweaks for Your itch.io Pages » Comments

Viewing post in Pitch – CSS Components and Tweaks for Your itch.io Pages comments

Hi, sorry for the late reply!

I assume you meant having the screenshot like in the mobile layout of the page?

You can force the mobile layout by setting it as flexbox and reverse the direction:

.columns {
    /*  Reverse the direction (screenshot column on top)  */
    flex-direction: column-reverse;
}
.columns > .column {
    width: auto;
}

/*  Set the screenshot list to display as if its on mobile layout  */
.view_game_page .screenshot_list {
    white-space: nowrap;
    overflow: auto;
    text-align: center;
    font-size: 0;
}
.view_game_page .screenshot_list img {
    display: inline-block;
    margin: 0;
}

宮中眠252 days ago (1 edit) (+1)

Thanks a lot! Been using a friend's game page to experiment with CSS since the feature isn't available on this account yet. If possible to ask, do you have any suggestions for fixing misaligned Video and Screenshot widths like this?

nnda252 days ago

Ah, that little off spacing to the right of the video?

Try this:

.right_col > .video_embed {
    /*  Center video embed  */
    margin: auto;
    /*  Bottom spacing  */
    margin-bottom: .5em;
    /*  Video embed maximum width  */
    max-width: 700px;
}

Its just the margin: auto; that centers it, the rest is optional to tidy things up.

宮中眠250 days ago (1 edit) (+1)

Really appreciate it!! We sent a little donation your way as well ᓚ₍⑅^..^₎♡

nnda249 days ago(+1)

Oh my god, thank you so much for the incredibly generous donation! I truly appreciate it!! <3

宮中眠247 days ago (4 edits) (+1)

Hello nnda, so sorry for bothering you again. First of all, thank you for the wonderful profile source code. If it is not a bother to ask, we would like to ask for tips to increase the size of the icons in Support panel? We also noticed that the box is appearing on top of the collection box and we are stuck on how to fix it. We have uploaded it here for review. Thank you for your time. ( ⸝⸝´꒳`⸝⸝)

nnda247 days ago (3 edits) (+1)

Hi again! No problem! Don’t hesitate to ask anytime. First off, that’s a cute adaptation of the styles! I really appreciate the attribution and the shout-out!

Addressing your issues:

For sizing the ‘Support Us’ icons, you can increase the height attribute of the <img> element. Or, you can set them in CSS to avoid having to set the height for each images manually:

.custom-cb > img {
  height: 35px;
}

And for the off collection box background, set the height of the .collection_row::before element to 100%, minus the space that it takes by its heading/title:

.collection_row::before {
  height: calc(100% - 3.5em);
}

The calculation is just speculation: 100% of the height minus 3.5em—around the height of the collection’s heading/title, you can readjust it to your liking.

Sorry I didn’t put many documentations/comments in the SCSS source code T^T

Also, if you wish to, I can help you guys set things up with the CSS directly :)

宮中眠247 days ago(+1)

Thank you very much, we’ll give your suggestions a try! (˶ᵔ ᵕ ᵔ˶)

If we want to accept help with applying CSS directly, what would be the best way to go about it?

nnda247 days ago(+2)

I can do Discord, or maybe in a GitHub Discussion. Or anywhere else where the stuff can be discussed.

宮中眠247 days ago (1 edit) (+1)

Thank you so much! We believe we've fixed the issues thanks to your direction! We've noticed the follow button's visual is strange if we play with Unfollow button. If Discord is OK, could you please add kiranyaki? (ᵕ ´ ∇ ˋ ˶)