Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing mobile banner height and padding


Question

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!

IMG_7605.thumb.PNG.a65d917d6ff6886ef0d2377e4abd3100.PNG

Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}
Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Screen Shot 2021-06-28 at 2.10.02 pm.png

Link to comment
  • 0
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.

Screen Shot 2021-06-28 at 2.10.02 pm.png

Can you paste all code in Custom CSS?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;

}

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...