Changing mobile banner height and padding

Site URL: https://nominis.me/home-2

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!

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;
}
}

 

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;
}
}

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;
}
}

 

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.

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?

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;

}

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

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

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

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

this email

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

this email

Invited in!

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.