Skip to content

Fix container animation smaller screen #550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Ante-Koceic wants to merge 3 commits into from
Closed

Fix container animation smaller screen #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b8c905
Adjusted animations for smaller screens
Ante-Koceic Jul 24, 2025
00e7d74
Fixed order of styles
Ante-Koceic Jul 25, 2025
127fec9
Removed extra </br>
Ante-Koceic Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions apps/website/src/components/ServiceCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,10 @@ const image = await src();
max-lg:col-span-6
md:gap-x-7
w-full
absolute
h-[710px]
[w-425px]:h-[710px]
overflow-hidden
`,
styles,
styles
)}
>
<section
Expand All @@ -67,21 +66,26 @@ const image = await src();
lg:grid-rows-[min-content_auto]
backdrop-blur-[15px]
`,
classNames,
classNames
)}
>
<div
class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
>
<span class="grid md:flex gap-7">
<img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
<img
src={iconPath}
alt=""
role="presentation"
class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12"
/>
<div class="gap-y-2 flex flex-col">
<h4
class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
>
{title}
</h4>
<p class="text-lg">{subtitle}</p>
<p class="text-sm md:text-lg">{subtitle}</p>
</div>
</span>
<div
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/content/services/improving-engineering-tempo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ bgColor: "bg-[#3C3843E5]/[0.9]"
By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures.
</br>
</br>
</br>

<div class="flex justify-end items-center gap-4">
<p class="text-right">Schedule a free DevEx audit</p>
<a id="contact-us-our-services-cta"
class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
href="/contact">
Contact Us
</a>
</div>
</div>
33 changes: 32 additions & 1 deletion apps/website/src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,38 @@ body:has(nav #nav-menu-toggle:checked) {
border-color: #607A1A;
}

@media (min-width: 320px) {
@media (min-width: 425px) {
.animation-container {
/* 4 x card height - 3 x negative margin top */
height: calc((4 * 710px) - (3 * 50));
}

.animation-card {
position: sticky;
width: 100%;
max-height: 710px;
margin-top: -50px;
}

.animation-card:nth-child(1) {
top: 100px;
margin-top: 0;
}

.animation-card:nth-child(2) {
top: 170px;
}

.animation-card:nth-child(3) {
top: 240px;
}

.animation-card:nth-child(4) {
top: 310px;
}
}

@media (min-width: 768px) {
.animation-container {
/* 4 x card height - 3 x negative margin top */
height: calc((4 * 710px) - (3 * 50));
Expand Down