Use this code to Website > Website Tools > Custom CSS
/* Mobile extra space */
@media screen and (max-width:767px) {
.fe-65c13c59fca4ce46d9891822 {
grid-template-rows: repeat(55,minmax(24px, auto)) !important;
}
}
Add this CSS code under your code to fix problem on mobile
.header-menu-nav-item--active {
width: auto !important;
background: unset !important;
}
.header-menu-nav-item--active div:before {
content: "";
background-color: red;
width: 15px;
height: 15px;
display: inline-block;
border-radius: 50%;
}
Remove your code & use this new code
nav.header-nav-list>div:nth-child(1) {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
nav.header-nav-list>div:nth-child(2) {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Also, I see your font-face code has invalid code, so I guess it didn't work on some devices
If you use a Business Plan/higher, you can use this code to Personal Page Header Code Injection
<style>
/* portfolio 16:9 */
.grid-image {
padding-bottom: 56.25% !important;
}
</style>
If your plan doesn't support Code Injection, you can share link to Personal Plan, we can help easier
(If you use a Business Plan or higher, I will give another easier guide to do this)
With current case, you can use this code to Website > Website Tools > Custom CSS
div#block-yui_3_17_2_1_1697723457843_13372 p:before {
content: "";
background-image: url(https://images.squarespace-cdn.com/content/v1/6527207078777a00e84fa37a/469f2106-40a3-4199-8af4-b54b4a13b2c4/SipPoint+logo.png?format=1500w);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 100px;
height: 40px;
}
div#block-yui_3_17_2_1_1697723457843_13372 p {
display: flex;
align-items: center;
justify-content: center;
}
Don't remove any code in your current code. Add this to Custom CSS
.summary-item:hover .summary-content.sqs-gallery-meta-container {
opacity: 1 !important;
pointer-events: none;
}
.summary-item .summary-content.sqs-gallery-meta-container {
width: 100% !important;
}
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS
@media screen and (max-width:767px) {
.item-pagination[data-collection-type^="blog"] .item-pagination-title {
font-size: 14px !important;
}
}
Change your code to this code
<style>
/* hide items on desktop */
nav.header-nav-list>div:nth-child(-n+7) {
display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+7) {
display: none;
}
</style>
Yes. You can code it with HTML, then add to Website > Website Tools (under Not Linked) > Code Injection > Lock Screen/Lock Page
and you will need to to use some CSS/JS code to move it to desired position on Lock Page
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS to increase width
.fe-65b1968b881a407ad804001e {
--sqs-site-max-width: 100% !important;
}
I guess you should contact sqsptheme support, they can check this problem easier.
--
You can try using Local Method (Markdown Block) to add Accordion, then check again
tuanphan's post in Extra space below summary grid block was marked as the answer
