Skip to content

Align conference image to top of content - #12

Draft
EngstromJimmy with Copilot wants to merge 3 commits into
mainfrom
copilot/align-conference-image-top
Draft

Align conference image to top of content#12
EngstromJimmy with Copilot wants to merge 3 commits into
mainfrom
copilot/align-conference-image-top

Conversation

Copilot AI commented Jan 1, 2026

Copy link
Copy Markdown

The conference image was vertically centered in its container, misaligning with the date field and other content. This PR implements a targeted solution using CSS align-self property to align only the image column to the top.

Changes

  • Updated ConferencePage.razor in NextTechEvent.Client project only
  • Added conference-image-column CSS class to the image column div
  • Added CSS rule using align-self: flex-start to override the parent row's center alignment for just the image column
- <div class="col-md-4">
+ <div class="col-md-4 conference-image-column">
.conference-image-column {
    align-self: flex-start !important;
}

Approach

This solution is more targeted than changing the entire row's alignment. It uses the align-self CSS property to override the parent container's align-items-center for only the image column, while keeping the row's default centering behavior intact for other potential use cases.

Visual Impact

Before: Image vertically centered with content block
After: Image column aligned to top using align-self: flex-start, matching the conference title and date position

Original prompt

This section details on the original issue you should resolve

<issue_title>Align the conference image to the top</issue_title>
<issue_description>Align the image of the conference in conferencepage.razor.
It should be align with the top if the date.</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: EngstromJimmy <2390244+EngstromJimmy@users.noreply.github.com>
Copilot AI changed the title [WIP] Align conference image to the top of the page Jan 1, 2026
Copilot AI requested a review from EngstromJimmy January 1, 2026 16:36
Comment thread NextTechEvent/NextTechEvent/NextTechEvent.Client/Pages/ConferencePage.razor Outdated
Comment thread NextTechEvent/NextTechEventNet7/Pages/ConferencePage.razor Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants