diff --git a/assets/css/main.css b/assets/css/main.css index a021c23..7bf05f0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -116,8 +116,25 @@ body { .CVButtons { display: flex; - justify-content: space-between; + justify-content: center; /* Center the buttons horizontally */ + gap: 1em; /* Add a 1em space between the buttons */ margin-bottom: 1em; + flex-wrap: wrap; /* Allow buttons to wrap if needed */ +} + +.CVButtons .button { + flex: 1; /* Make buttons take equal space */ + min-width: 200px; /* Ensure buttons don't get too small */ + max-width: 250px; /* Optional: limit the maximum width */ +} + +#icons { + display: flex; + flex-wrap: nowrap; /* Prevent icons from wrapping */ + justify-content: center; /* Center the icons horizontally */ + margin: 0 auto; + width: 100%; + overflow-x: auto; /* Allow horizontal scrolling if needed */ } ol, @@ -2837,6 +2854,16 @@ input[type="button"]:disabled, #footer .icons { margin: 1em 0 0 0; text-align: center; + display: flex; /* Ensure flexbox is applied */ + flex-wrap: nowrap; /* Prevent wrapping to multiple lines */ + justify-content: center; /* Center the icons horizontally */ + overflow-x: auto; /* Allow horizontal scrolling if needed */ + white-space: nowrap; /* Keep items on one line */ +} + +#footer .icons li { + display: inline-block; /* Ensure inline behavior within flex */ + padding: 0 1em 0 0; /* Maintain spacing between icons */ } #footer .icons a { @@ -3315,6 +3342,13 @@ body.is-touch .poptrox-popup .closer { @media screen and (max-width: 736px) { /* Basic */ + #footer .icons a { + font-size: 1em; /* Reduce icon size */ + } + #footer .icons li { + padding: 0 0.75em 0 0; /* Reduce padding between icons */ + } + h1 { font-size: 1.5em; } @@ -3385,6 +3419,17 @@ body.is-touch .poptrox-popup .closer { .poptrox-popup .nav-previous:before { margin-top: -1em; } + + .CVButtons { + flex-direction: column; /* Stack buttons vertically */ + align-items: center; /* Center buttons horizontally when stacked */ + gap: 0.5em; /* Reduce the space between stacked buttons to 0.5em */ + } + + .CVButtons .button { + width: 100%; /* Make buttons full-width on mobile */ + max-width: 300px; /* Optional: limit the maximum width on mobile */ + } } /* XSmall */ diff --git a/assets/sass/main.scss b/assets/sass/main.scss index c905048..0151c2f 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1508,6 +1508,31 @@ $size-header-pad: 4em; /* Small */ +.CVButtons { + display: flex; + justify-content: center; + gap: 1em; + margin-bottom: 1em; + flex-wrap: wrap; + + .button { + flex: 1; + min-width: 200px; + max-width: 250px; + } + + @include breakpoint('<=small') { + flex-direction: column; + align-items: center; + gap: 0.5em; + + .button { + width: 100%; + max-width: 300px; + } + } +} + @include breakpoint('<=small') { $size-header-pad: 1.5em;