HoaLT

You can set the addition figuration in Design > Custom CSS
#article- { padding-bottom: 0; } .item-pagination { padding-top: 15px; }  

The space is created by the padding of conten-wrap. You can try adding in Design > Custom CSS
.content-wrapper { padding-bottom: 0 !important; } Hope that it is useful for you

Here is the result after remove padding

You can set the addition figuration in Design > Custom CSS
#article- { padding-bottom: 0; } .item-pagination { padding-top: 15px; }  

It would be easier to check your issues if you can share your site with the password protected!

Can you share your site with the password protected for easier checking?

I can not access the page with the problem you described above. Can you share the direct link to this page?

Do you mean that when you click a button, page will load to the section linked by button?

Try this in Design > Custom CSS
@media only screen and (max-width: 768px) { #headerWrapper header { padding: 0 0 10px 0; } }  

The result should be like this

Try the following configuration in Desin > Custom Css
@media only screen and (max-width: 768px) { .homepage [data-slide-id="610c29e83f1f825f0dce7cfa"] img { height: 100vh; width: auto; position: relative; transform: translateX(-50%); left: 50%; } }  

Try adding space at the beginning and ending of "Your passion"

You can apply the following steps:
1. Home > Pages > Edit your heading > Set bold for "Your Passion"

2. Home > Design > Custom CSS
#block-5441a2f77e4fa42d5289 h1 strong { font-weight: inherit; } @media only screen and (max-width: 768px) { #block-5441a2f77e4fa42d5289 h1 strong { display: block; } } Hope that it is ok for your site!

I think so too! hope you enjoy with your site

i found out that that url can not be edited since the itemID is the lightbox url id, not the id of img

Can you share your site with the password protected for easier checking?

You need to modify your javascript:

Replace with the following script
$(document).ready(function() { try { var container = Y.one("#block-d3fe1f534bd0f0631332"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true, } }); container._node.addEventListener("mouseover", () => { gallery.setAttrs({ "autoplay": false }) }) container._node.addEventListener("mouseout", () => { gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, "randomize": true, } }) }) } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); Hope work well for you

1st Point:
You can try the Design > Custom CSS with the following setting
@media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right { text-align: center; } #block-yui_3_17_2_1_1632274074310_17542 a { padding: 1em 1.404em; } [data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper { padding-bottom: 0 !important; padding-top: 25vmax !important; } section[data-section-id="614a87c7f80dc06b128e4478"] { height: 36vh !important; } section[data-section-id="614a87c7f80dc06b128e4478"] .section-background { bottom: unset; } }

Is it that you mean?

You can set the addition figuration in Design > Custom CSS
#article- { padding-bottom: 0; } .item-pagination { padding-top: 15px; }  

1st Point:
You can try the Design > Custom CSS with the following setting
@media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right { text-align: center; } #block-yui_3_17_2_1_1632274074310_17542 a { padding: 1em 1.404em; } [data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper { padding-bottom: 0 !important; padding-top: 25vmax !important; } section[data-section-id="614a87c7f80dc06b128e4478"] { height: 36vh !important; } section[data-section-id="614a87c7f80dc06b128e4478"] .section-background { bottom: unset; } }

You need to modify your javascript:

Replace with the following script
$(document).ready(function() { try { var container = Y.one("#block-d3fe1f534bd0f0631332"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true, } }); container._node.addEventListener("mouseover", () => { gallery.setAttrs({ "autoplay": false }) }) container._node.addEventListener("mouseout", () => { gallery.setAttrs({ "autoplay": true, "autoplayOptions": { "timeout": 6000, "randomize": true, } }) }) } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); Hope work well for you

Here is the result

You can apply the following steps:
1. Home > Pages > Edit your heading > Set bold for "Your Passion"

2. Home > Design > Custom CSS
#block-5441a2f77e4fa42d5289 h1 strong { font-weight: inherit; } @media only screen and (max-width: 768px) { #block-5441a2f77e4fa42d5289 h1 strong { display: block; } } Hope that it is ok for your site!

You can get some reference in this post with your cover pages