Optimizacija medkulturno-posredovanje strani za mobilne naprave in popravki besedila
Deploy to Development and Production / deploy (push) Successful in 3m31s
Deploy to Development and Production / deploy (push) Successful in 3m31s
This commit is contained in:
Mark committed
1 parent
78e7e64e5a
commit
1810e95892
2 files changed
+394
-21
No files matched your search
+356
@@ -7785,6 +7785,12 @@ html, body {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mediation-main-title .mediation-hero-lead {
|
||||
margin: 1rem auto 0;
|
||||
text-align: center;
|
||||
max-width: 70ch; /* Povečana širina za boljšo poravnavo */
|
||||
}
|
||||
|
||||
.mediation-hero-split {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -7986,3 +7992,353 @@ html, body {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE OPTIMIZATIONS FOR MEDIATION PAGE
|
||||
======================================== */
|
||||
|
||||
/* Mobile optimization for grid layout with 2 columns */
|
||||
@media (max-width: 768px) {
|
||||
/* Make the 2-column grid single column on mobile */
|
||||
.content-section div[style*="grid-template-columns: repeat(2, 1fr)"] {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Optimize spacing for mobile */
|
||||
.content-section {
|
||||
padding: 40px 1rem !important;
|
||||
}
|
||||
|
||||
/* Purpose cards mobile optimization */
|
||||
.purposes-container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.purpose-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.purpose-card h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.purpose-card p,
|
||||
.purpose-card li {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.purpose-example p {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.purpose-goal {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
/* Prosberry cards mobile */
|
||||
.prosberry-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.prosberry-card h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.prosberry-card p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Process steps mobile */
|
||||
.steps-container {
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.step-card strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.step-card p {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
/* Pricing mobile */
|
||||
.pricing-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pricing-row {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.pricing-amount {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Benefits list mobile */
|
||||
.benefits-list {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Hero section mobile text */
|
||||
.mediation-hero-text h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.mediation-hero-text ul.hero-bullets li {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.mediation-hero-text p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Main title mobile */
|
||||
.mediation-main-title h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.mediation-main-title .mediation-hero-lead {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Button row mobile */
|
||||
.button-row {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.button-row .cta-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* References section mobile */
|
||||
.split-ref-layout {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.reference-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.reference-card p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.reference-author {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
/* Final CTA mobile */
|
||||
.final-cta-content h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.final-cta-content p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.final-cta-buttons {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.final-cta-buttons .cta-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Reading grid mobile */
|
||||
.reading-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.blog-link-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small mobile devices */
|
||||
@media (max-width: 520px) {
|
||||
.mediation-hero {
|
||||
padding: 100px 1rem 60px !important;
|
||||
}
|
||||
|
||||
.mediation-main-title h1 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.mediation-main-title .mediation-hero-lead {
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.mediation-hero-kicker {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
}
|
||||
|
||||
.mediation-hero-text h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-top: 1.5rem !important;
|
||||
margin-bottom: 0.8rem !important;
|
||||
}
|
||||
|
||||
.mediation-hero-text p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.mediation-hero-text ul.hero-bullets li {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.mediation-hero-card {
|
||||
padding: 1.3rem 1.2rem;
|
||||
}
|
||||
|
||||
.mediation-hero-card h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mediation-hero-card ul li a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 35px 1rem !important;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
.purpose-card {
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
.purpose-card h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.purpose-card p,
|
||||
.purpose-card li {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.prosberry-card {
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
.prosberry-card h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.prosberry-card p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.step-card strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.step-card p {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.pricing-amount {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.reference-card {
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
.reference-card p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.final-cta-content h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.final-cta-content p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape mobile optimization */
|
||||
@media (max-width: 768px) and (orientation: landscape) {
|
||||
.mediation-hero {
|
||||
padding: 80px 1.5rem 50px !important;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.mediation-hero-container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 40px 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly improvements */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* Increase tap targets for mobile */
|
||||
.cta-button {
|
||||
min-height: 48px;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.mediation-hero-card li a {
|
||||
padding: 0.5rem 0;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion-toggle,
|
||||
.about-accordion-toggle {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
/* Improve readability on mobile */
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Prevent text overflow */
|
||||
p, li, span {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user