Changing mobile banner height and padding

MMEbyKiandraTrickett · June 9, 2021

Hey crew

I'm working through the below site and wanting to increase the banner size on the homepage (main banner). You can see on mobile the text overlaps the imagery of the individuals. I would ideally want this text sitting in the grey space above, and increase the grey space.

Another option is that I can upload a secondary image for mobile so that there's more grey space above.

https://nominis.me/home-2

Help a sister out!

tuanphan · June 10, 2021

Try adding to Design > Custom CSS

/* Mobile-Home-2-Banner */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623056687573_14231 {
    display: none;
}
div#page-6099042fb81eae0340083a3e .span-5 {
    position: relative;
    top: -80px;
}
}

MMEbyKiandraTrickett · June 22, 2021

On 6/10/2021 at 12:47 PM, tuanphan said:

Try adding to Design > Custom CSS


/* Mobile-Home-2-Banner */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623056687573_14231 {
    display: none;
}
div#page-6099042fb81eae0340083a3e .span-5 {
    position: relative;
    top: -80px;
}
}

Thank you! This worked - I tried your code to replace banner image on mobile, replaced the code with my collection ID numbers but hasn't worked?

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

tuanphan · June 24, 2021

On 6/22/2021 at 5:51 PM, MMEbyKiandraTrickett said:
Thank you! This worked - I tried your code to replace banner image on mobile, replaced the code with my collection ID numbers but hasn't worked?
@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

This code for SS 7.1. Your site is 7.0

Try this code

@media screen and (max-width:640x) {
section#homewelcome img {
    visibility: hidden;
}
section#home-welcome {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

MMEbyKiandraTrickett · June 28, 2021

On 6/24/2021 at 1:11 PM, tuanphan said:

This code for SS 7.1. Your site is 7.0

Try this code


@media screen and (max-width:640x) {
section#homewelcome img {
    visibility: hidden;
}
section#home-welcome {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

Thanks! Do you know why I'd be receiving a syntax error? Hasn't worked but assume fixing that it will.

tuanphan · June 30, 2021

On 6/28/2021 at 11:11 AM, MMEbyKiandraTrickett said:

Thanks! Do you know why I'd be receiving a syntax error? Hasn't worked but assume fixing that it will.

Can you paste all code in Custom CSS?

MMEbyKiandraTrickett · July 2, 2021

The top bits will be cleaned up. Had to change all colours manually because they had a separate site live at the time of me re-building.

//Hopmepage main banner//

#home-welcome h1 {color: #051F3B;}

//Hopmepage services banner//

#testimonials {background: #D4D4D4;}

#testimonials h1 {color: #051F3B;}

#testimonials h2 {color: #051F3B;}

#testimonials h3 {color: #051F3B;}

#testimonials p {color: #051F3B;}

#testimonials p a {color:#051F3B;}

//Hopmepage cta banner//

#cta {background: #051F3B;}

#cta h1 {color: #ffffff;}

#cta h2 {color: #ffffff;}

#cta h3 {color: #ffffff;}

#cta p {color: #ffffff;}

#cta p a {color: #ffffff;}

//Homepage services banner//

#our-services p a {color: #ffffff;}

#our-services h1 {color: #ffffff;}

#our-services h2 {color: #ffffff;}

#our-services h3 {color: #ffffff;}

#our-services p {color: #ffffff;}

#cta p a {color: #ffffff;}

//About quote banner//

#about-quote {background: #051F3B;}

#about-quote h1 {color: #ffffff;}

#about-quote h2 {color: #ffffff;}

#about-quote h3 {color: #ffffff;}

#about-quote p {color: #ffffff;}

#about-quote p a {color: #ffffff;}

//About banner//

#about-cta {background: #051F3B;}

#about-cta h1 {color: #ffffff;}

#about-cta h2 {color: #ffffff;}

#about-cta h3 {color: #ffffff;}

#about-cta p {color: #ffffff;}

#about-cta p a {color: #ffffff;}

//about header//

#about-header h1 {color: #ffffff;}

#about-header h2 {color: #ffffff;}

#about-header h3 {color: #ffffff;}

#about-header p {color: #ffffff;}

#about-header p a {color: #ffffff;}

//about header//

#care-about h1 {color: #051F3B;}

#care-about h2 {color: #051F3B;}

#care-about h3 {color: #051F3B;}

#care-about p {color: #051F3B;}

#care-about p a {color: #051F3B;}

//REMOVE UNDERLINE//

p a {border:none!important;}

// Fade Out Line Buttom-Left To Right small //

.sqs-block-button-element--small {

position:relative;

height: 60px;

line-height: 60px;

text-align: center;

transition: 0.5s;

padding: 0 20px;

cursor: pointer;

-webkit-transition:0.5s;

}

.sqs-block-button-element--small:hover {

background-color: transparent;

border-color: transparent;

color: #ffffff;

}

.sqs-block-button-element--small:hover:before{

transition-delay: .2s;

}

.sqs-block-button-element--small::before{

width: 0%;

height:100%;

z-index: 3;

content:'';

position: absolute;

bottom:-1px;

left:0;

box-sizing: border-box;

transition: .2s;

}

.sqs-block-button-element--small:hover::before {

width: 100% !important;

transition: .7s;

}

.sqs-block-button-element--small::before {

border-bottom: 2px solid #F1F1F1;

}

// Fade Out Line Buttom-Left To Right medium //

.sqs-block-button-element--medium {

position:relative;

height: 60px;

line-height: 60px;

text-align: center;

transition: 0.5s;

padding: 0 20px;

cursor: pointer;

-webkit-transition:0.5s;

}

.sqs-block-button-element--medium:hover {

background-color: transparent;

border-color: transparent;

color: #051F3B;

}

.sqs-block-button-element--small:hover:before{

transition-delay: .2s;

}

.sqs-block-button-element--medium::before{

width: 0%;

height:100%;

z-index: 3;

content:'';

position: absolute;

bottom:-1px;

left:0;

box-sizing: border-box;

transition: .2s;

}

.sqs-block-button-element--medium:hover::before {

width: 100% !important;

transition: .7s;

}

.sqs-block-button-element--medium::before {

border-bottom: 2px solid #051F3B;

}

//white mobile logo//

.Mobile-bar-branding-logo { content: url("https://static1.squarespace.com/static/5a7ae678fe54efbf7728184f/t/60a4d59aa22ee22cf2302b1c/1621415322381/Nominis-white.png") !important;

max-height:60px;

min-height: 60px;

width:auto !important;

}

//Custom Burger Icon//

.burger-inner {

display: none;

}

.Mobile-bar-menu {stroke:transparent; background-image: url('https://static1.squarespace.com/static/5a7ae678fe54efbf7728184f/t/60a4d74cc16750680824acf4/1621415756966/Nominis-burger-icon.png'); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; height: 15px; } .burger-inner { display: none; }

//Medium button size//

.sqs-block-button .sqs-block-button-element--medium {

padding: 15px 25px;

}

//hover over image//

a img.thumb-image {

display: inline-block;

vertical-align: middle;

-webkit-transform: translateZ(0);

transform: translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-osx-font-smoothing: grayscale;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform;

transition-property: transform;

}

a img.thumb-image:hover,

a img.thumb-image:active {

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

//Accordion text//

.markdown-block p {

margin-left:1.5em;

}

.markdown-block .ui-closed:before {

font-family:monospace;

content:"+ ";

color: #ffffff

}

.markdown-block .ui-open:before {

font-family:monospace;

content:"- ";

color: #ffffff

}

.markdown-block h3 {

border-bottom: solid 1px #ffffff;

padding: 10px 3px; }

/* Homepage nav color */

body.homepage a.Header-nav-item {

color: #061E39 !important;

}

tuanphan · July 3, 2021

The code looks fine. Can you duplicate the site & add me as an admin? We can check in Custom CSS easier.

MMEbyKiandraTrickett · July 5, 2021

Happy to add you in - what's your email?

tuanphan · July 7, 2021

On 7/5/2021 at 4:12 PM, MMEbyKiandraTrickett said:

Happy to add you in - what's your email?

this email

MMEbyKiandraTrickett · July 8, 2021

On 7/7/2021 at 3:20 PM, tuanphan said:

this email

Invited in!

tuanphan · July 10, 2021

On 7/9/2021 at 5:52 AM, MMEbyKiandraTrickett said:

Invited in!

Hi. Can you send it again? When you're done, you can message me.

I get a lot of invites every day, so not sure which one is yours.

Changing mobile banner height and padding

Recommended Posts

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

MMEbyKiandraTrickett

Link to comment

tuanphan

Link to comment

Archived

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources