Hi! I used CSS to make my logo and banner image fit in mobile but even though the "Surei Studios" text shows, it's too high up and all page sections start in the menu bar. That isn't a problem in most pages, but my cart page also has the first section title starting on the menu. The CSS I used for the mobile image and logo is:
/*mobile*/
@media screen and (max-width:767px) {
[data-section-id="6522109e4189ab496e451f3e"] {
min-height: unset !important;
height: 31.5vh;
padding: 10px 10px;
}
}
/* logo position */
.sqs-block-accordion .accordion-item__title-wrapper {
background: url(https://static1.squarespace.com/static/652210922aeae46a5b8126d0/t/66253fba679550731642bfd3/1713717178545/Logo.png) !important;
background-position: center !important;
background-size: cover !important;
padding: 10px 20px;
margin-bottom: 10px;
border-radius: 10px;
}
.header-announcement-bar-wrapper {
padding-top: 14px!important;
padding-bottom: 60px !important;
}
header#header img {
max-height: 120px;
position: absolute;
top: 70% !important;
left: 50%;
transform: translate(-50%,-50%);
}
header#header {
margin-top: 20px;
}
Thank you all for your help!
Hi! I used CSS to make my logo and banner image fit in mobile but even though the "Surei Studios" text shows, it's too high up and all page sections start in the menu bar. That isn't a problem in most pages, but my cart page also has the first section title starting on the menu. The CSS I used for the mobile image and logo is: /*mobile*/ @media screen and (max-width:767px) { [data-section-id="6522109e4189ab496e451f3e"] { min-height: unset !important; height: 31.5vh; padding: 10px 10px; } } /* logo position */ .sqs-block-accordion .accordion-item__title-wrapper { background: url(https://static1.squarespace.com/static/652210922aeae46a5b8126d0/t/66253fba679550731642bfd3/1713717178545/Logo.png) !important; background-position: center !important; background-size: cover !important; padding: 10px 20px; margin-bottom: 10px; border-radius: 10px; } .header-announcement-bar-wrapper { padding-top: 14px!important; padding-bottom: 60px !important; } header#header img { max-height: 120px; position: absolute; top: 70% !important; left: 50%; transform: translate(-50%,-50%); } header#header { margin-top: 20px; } Thank you all for your help!
