ncue/ncue_academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish mobile hero slider

Browse Source
This commit is contained in:
dsyoon
2026-01-03 17:05:20 +09:00
parent 856fb354cf
commit 6da99241d2
1 changed files with 70 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
css/ncue.css
View File

@@ -180,10 +180,11 @@ h1,h2,h3,h4{
#featured #main-slider .slides img{ height: 360px; } #featured #main-slider .slides img{ height: 360px; }
} }
@media (max-width: 767px){ @media (max-width: 767px){
#featured #main-slider .slides img{ height: 300px; } /* Give a bit more vertical room for the caption card */
#featured #main-slider .slides img{ height: 320px; }
} }
@media (max-width: 480px){ @media (max-width: 480px){
#featured #main-slider .slides img{ height: 260px; } #featured #main-slider .slides img{ height: 300px; }
} }
#featured:before{ #featured:before{
@@ -218,6 +219,73 @@ h1,h2,h3,h4{
filter: saturate(1.02) contrast(1.02); filter: saturate(1.02) contrast(1.02);
} }
/* Slider polish on mobile: keep caption (template hides it), improve layout + navigation */
@media (max-width: 767px){
/* Hide direction arrows (hover-based) and rely on swipe + dots */
#featured .flex-direction-nav{
display: none;
}
/* Make caption a clean bottom card */
#featured .flexslider .flex-caption{
display: block !important; /* override template's small-screen 'display:none' */
left: 12px !important;
right: 12px !important;
bottom: 34px !important; /* reserve space for dots */
width: auto !important;
padding: 14px 14px 12px !important;
margin: 0 !important;
text-align: left;
}
#featured .flex-caption h3{
text-transform: none !important;
letter-spacing: -0.6px !important;
font-size: 18px;
line-height: 1.25;
margin: 0 0 8px;
word-break: keep-all;
}
#featured .flex-caption p{
font-size: 13px !important;
line-height: 1.6;
margin: 0 0 10px;
word-break: keep-all;
}
#featured .flex-caption .btn{
display: inline-block;
width: 100%;
padding: 12px 14px;
font-weight: 900;
}
/* Dots: keep visible and avoid overlapping the caption */
#featured .flex-control-nav{
bottom: 10px;
z-index: 4;
}
#featured .flex-control-paging li a{
width: 9px;
height: 9px;
background: rgba(255,255,255,0.45);
box-shadow: none;
}
#featured .flex-control-paging li a.flex-active{
background: rgba(255,255,255,0.92);
}
}
@media (max-width: 480px){
#featured .flexslider .flex-caption{
left: 10px !important;
right: 10px !important;
bottom: 32px !important;
padding: 12px 12px 10px !important;
}
#featured .flex-caption h3{
font-size: 17px;
}
}
/* CTA block (override template's `section.callaction { padding:50px 0 0 0; }`) */ /* CTA block (override template's `section.callaction { padding:50px 0 0 0; }`) */
section.callaction{ section.callaction{
padding-top: 22px; padding-top: 22px;