Problem/Motivation

On Mobile view Blog post is not proper aligned when image is there in blog.

Before fixing issue
before

After fixing issue

CommentFileSizeAuthor
#11 Screen Shot 2024-08-07 at 6.37.10 AM.png183.83 KBjwilson3
#8 Screen Shot 2024-08-07 at 2.11.45 AM.png138.03 KBjwilson3
#5 Mobile-view-Blog-post-issues-3465127-05.png66.1 KBbhaveshdas
#3 after.png205.49 KBalok_singh
before.png165.37 KBalok_singh

Issue fork rivet-3465127

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

  • rivet-3465127 Comparechanges, plain diff MR !7
  • 1.0.x Comparecompare
About issue forks

Comments

alok_singh created an issue. See original summary.

alok_singh opened merge request !7

alok_singh’s picture

alok_singh commented
StatusFileSize
new after.png205.49 KB

After Fixing the issue

after

rajan kumar@2026’s picture

rajan kumar@2026 commented
Status: Active » Needs review
bhaveshdas’s picture

bhaveshdas commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Mobile-view-Blog-post-issues-3465127-05.png66.1 KB

Hi, I have tested MR !7 in Drupal 10
Mobile view Blog post its proper aligned when image is there in blog.
I moved it to RTBC.

Thankyou !!

jwilson3 made their first commit to this issue’s fork.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Status: Reviewed & tested by the community » Needs work

Needs work.

  • DONE: Needs a rebase on latest 1.0.x.
  • DONE: The gitlab integration needs to be split out, it is unrelated to the scope of this issue. It also doesn't use the standard Drupal Gitlab CI Template. This is in progress here #3466431: Add support for Gitlab CI.
  • It's obvious you didn't run npm install; npm run build to build the CSS because the source map file wasn't regenerated.
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
StatusFileSize
new Screen Shot 2024-08-07 at 2.11.45 AM.png138.03 KB

After reviewing the code change more closely this needs an alternate approach because the upstream Rivet library suffers from the same problem at small screen sizes:

https://rivet.iu.edu/components/card/?example=horizontal-card

I don't see this getting "fixed" in the upstream, therefore, there are a few approaches we can take:

  • Use a square image style, to match the intended use of Rivet Horizontal Card.
  • Use a utility class in the template to fix the card layout on mobile. For example, rvt-card rvt-card--horizontal [ rvt-flex-column rvt-flex-row-sm-up ] (codepen).
  • Build a custom rvt-c-card implementation to properly scope the change, following best practices for extending Rivet.
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Title: On Mobile view Blog post is not proper aligned when image is there in blog. » Rivet Card (Horizontal) - fix image layout for post teasers
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Assigned: Unassigned » jwilson3
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue summary: View changes
StatusFileSize
new Screen Shot 2024-08-07 at 6.37.10 AM.png183.83 KB

Rebased again and tested locally. Looks good.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Status: Needs work » Fixed

Thanks for your help!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.