UI/UX improvements: unified logo size, mobile optimizations, grid layout restructure
Deploy to Development and Production / deploy (push) Successful in 15s
Deploy to Development and Production / deploy (push) Successful in 15s
- Fixed logo size inconsistency across devices (unified to 44px) - Restructured homepage hero section with grid-template-areas for better layout control - Desktop: 3-column layout (welcome | image | sidebar) with recommendation box under image - Mobile: optimized order (image -> welcome -> recommendations -> info -> sidebar) - Added mobile text alignment optimizations (center for h1, left for descriptions) - Updated Medkulturno posredovanje page with justified text on mobile - Fixed Ponudba page free consultation notice alignment on mobile - Moved recommendation box to align with hero section bottom - Changed 'Svetovalno / preventivno' to 'Svetovalno medkulturno posredovanje' - Fixed star icon alignment in 'Zakaj izbrati Prosberry' section
This commit is contained in:
1 parent
aefd9b3b53
commit
6114983af5
4 files changed
+166
-64
No files matched your search
+123
-26
@@ -336,11 +336,9 @@ footer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Logotip se manjša skupaj z menijem */
|
||||
/* Logotip - fiksna velikost za konsistentnost */
|
||||
.logo img {
|
||||
height: 3.5vw;
|
||||
max-height: 50px;
|
||||
min-height: 25px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@@ -578,7 +576,7 @@ footer {
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: calc(50px + 2rem - 10px);
|
||||
height: 44px;
|
||||
width: auto;
|
||||
margin: 0 10px 0 0;
|
||||
display: block
|
||||
@@ -5320,34 +5318,66 @@ footer {
|
||||
position: relative
|
||||
}
|
||||
|
||||
/* --- DESKTOP POSTAVITEV --- */
|
||||
.hero-new-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
display: grid !important;
|
||||
grid-template-columns: 1.2fr 0.8fr 280px;
|
||||
grid-template-areas:
|
||||
"welcome image sidebar"
|
||||
"zakaj branje sidebar";
|
||||
gap: 2rem;
|
||||
align-items: stretch;
|
||||
min-height: auto;
|
||||
align-items: start;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 50px;
|
||||
z-index: 2;
|
||||
padding: 0 55px;
|
||||
}
|
||||
|
||||
.hero-new-text {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: auto;
|
||||
/* Razporeditev elementov v mrežo */
|
||||
.hero-welcome-area {
|
||||
grid-area: welcome;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 0
|
||||
}
|
||||
|
||||
.hero-new-image {
|
||||
grid-area: image;
|
||||
}
|
||||
|
||||
.workshops-sidebar-inline {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.hero-info-box {
|
||||
grid-area: zakaj;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.recommendation-box-home {
|
||||
grid-area: branje;
|
||||
margin-top: 1rem;
|
||||
align-self: end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero-welcome {
|
||||
text-align: left;
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-cta-box-inline {
|
||||
background: rgba(251, 99, 57, 0.08);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 10px;
|
||||
margin: 1rem 0;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-new-text h1 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero-slogan {
|
||||
@@ -6769,16 +6799,59 @@ html, body {
|
||||
padding: 100px 1rem 40px;
|
||||
}
|
||||
|
||||
.hero-new-text h1 {
|
||||
.hero-new-content {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* Točen vrstni red po navodilih */
|
||||
.hero-new-image {
|
||||
order: 1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-welcome-area {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.recommendation-box-home {
|
||||
order: 3;
|
||||
margin: 2rem 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.hero-info-box {
|
||||
order: 4;
|
||||
max-width: 100% !important;
|
||||
padding: 1.2rem;
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.workshops-sidebar-inline {
|
||||
order: 5;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Poravnave besedila na mobilniku */
|
||||
#hero-welcome {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem !important;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-new-subtitle {
|
||||
font-size: 1rem;
|
||||
.hero-slogan,
|
||||
.hero-new-description {
|
||||
text-align: left;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.hero-info-box {
|
||||
padding: 1.2rem;
|
||||
.hero-cta-box-inline {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-new-slogan {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-info-box h2 {
|
||||
@@ -6789,6 +6862,10 @@ html, body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero-new-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: 40px 1rem;
|
||||
}
|
||||
@@ -7355,6 +7432,11 @@ html, body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Besedilo v hero sekciji - obojestransko poravnano na mobilnih */
|
||||
.mediation-hero-text p {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
.mediation-hero-text .cta-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -7373,6 +7455,16 @@ html, body {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Besedilo v step karticah - obojestransko poravnano na mobilnih */
|
||||
.step-card p {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
/* "Zakaj izbrati Prosberry" naslov - leva poravnava na mobilnih */
|
||||
#zakaj h2 {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Cena prikaz na mobilnih */
|
||||
.pricing-content {
|
||||
width: 100%;
|
||||
@@ -7431,6 +7523,11 @@ html, body {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Brezplačno srečanje - leva poravnava besedila na mobilnih */
|
||||
.offer-free-notice p {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.offer-section {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user