sp-top-bar {

Hello

Thank you for your query.

Please add the following code in custom css section to solve hero section's full screen display issue:

.sp-page-builder .page-content #section-id-1631129533523 {
    margin-top: -192px;
}

Please do let me know if that works.

About hiding top bar: the best option will be to remove it from the layout builder - so your page does not have to load any extra elements.

Hi Ariba,

It made the hero section full screen (which is good) but now the elements of the hero section do not look the same and are too close to the bottom edge of the hero section.

For example, the three icons on the left, the text box on the right, and the thin horizontal line above it is too close to the bottom.

How can I move those elements up more? and force the full screen without moving the elements?

I tried to add padding and margins to the 3 icons and text box but then that caused the white row to show up again at the bottom.

Thanks

Thank you for your patience.

Please add the following code in custom css section:

.sp-page-builder .page-content #section-id-1631129533523 {
    padding-top: 30px;
    padding-bottom: 30px;
}

Please do let me know if that works.

Hi Ariba,

The CSS moved the Text Box and 3 icons up, which is good.

But how can I move the horizontal line up as well?

And as an additional question, how can I change the color of the two horizontal lines in the hero section?

Thanks

Also, on a mobile device, the hero section is not full screen and the three icons fall to the row below the hero section. How can I fix this?

(Note: I have removed the CSS class: hero-section from the hero row as I wanted to style the hero section myself)

Also, on a mobile, some of the "Feature Box" add-ons will switch in text color from the configured #ffffff to a gray color, how can I fix this as well?

Please replace previous custom css rules with the following css rule for hero section's full screen display issue and mobile device issue:

.sp-page-builder .page-content #section-id-1631129533523 {
    padding-bottom: 30px;
}

for font color change:

#sppb-addon-1631129533540 .sppb-addon-title {
    rgba(255, 255, 255, 0.8);
}
.sppb-addon-title.sppb-feature-box-title {
    color: white !important;
}

for top horizontal line color change (replace with your preferred color):

#sp-header {
    border-bottom-color: rgba(166, 124, 0, .3);
}

for bottom horizontal line color change (replace with your preferred color):

.hero-feature-list-wrap::before, .hero-feature-list-wrap::after {
    background-color: rgba(166, 124, 0, .3);
}

Please do let me know if that works.

Hello,

This code below moved the text box on the left and the 3 icons on the right back too close to the bottom of the screen and also added a unwanted gray bar under the hero section.

Basically, I would like to move the bottom horizontal line / top edge of that row up to match the original spacing of the template. As when we applied the full screen CSS, this shifted everything around.

.sp-page-builder .page-content #section-id-1631129533523 {
    padding-bottom: 30px;
}

This code below did not work to change the color of the bottom horizontal line,

.hero-feature-list-wrap::before, .hero-feature-list-wrap::after {
    background-color: rgba(166, 124, 0, .3);
}

Could you please advise? I have also shared the login details

Additionally, this code below to change the Feature Box text color to white also changes every other location of this feature box title to white, which is unwanted,

#sppb-addon-1631129533540 .sppb-addon-title {
    rgba(255, 255, 255, 0.8);
}
.sppb-addon-title.sppb-feature-box-title {
    color: white !important;
}

The original issue only happened on mobile and the text color should not change on other pages, could you please advise?

Hi Ariba, is there an update?

It has been a week now.

Thanks

Hello?

It has been 2 weeks now without a response, please advise on the following as stated above,

1. How to move the bottom horizontal line up and remove the gray bar that appears at the bottom of the hero section?

2. For the bug of the feature box text changing colors and not staying white on mobile: The provided code above that changes the Feature Box text color to white, also changes every other location of this feature box title to white, which is unwanted. How do I keep the text white on the Feature Box text color only on that section?

Hello

I have added the following codes in your Custom CSS Section and it should be alright now. Please check and if you have any queries, do let me know.

.sp-page-builder .page-content #section-id-1631129533523 {
    /*margin-top: -192px;*/
}
/*this code has been commented out - because default was good enough*/

.sp-page-builder .page-content #section-id-1631129533523 {
    padding-bottom: 30px;
}
#section-id-1631129533523 .sppb-addon-title {
    color: white !important;
}
@media (max-width: 991px) {
    .sp-page-builder .page-content #section-id-1631129533523 {
        padding-top: 20px;
    }
}
@media (max-width: 767px) {
    .sp-page-builder .page-content #section-id-1631129533523 {
        padding-top: 45px;
    }
    .sp-page-builder .page-content #section-id-1631129533523 #sppb-addon-wrapper-1631129533538 {
        margin-bottom: 0px;
    }
}
.hero-feature-list-wrap {
    border-top: 1px solid white;
}
/*if you want remove the horizontal line in the bottom - replace "1px solid white" with "none"*/

Hi Ariba,

Please see the comments below,

1. There is still the gray bar that appears below the hero section and the next row. (Please check the <www.mydomain/home3> url)

2. The gray bar also appears on a mobile device as well.

3. If I change the Heading font size of "Democratize..." the hero section will not be full screen anymore, if I switch it back to the default H3, then it will be full-screen but then the gray bar will appear again. You can see this issue on the homepage <www.mydomain>. (This issue seems to arise when I diable the 3 hero icons that were to the right) I need to be able to adjust the heading font size without losing the full screen and without the gray bar from appearing.

4. The Feature Box title text color is still not white on a mobile device, this seems to be a bug that needs to be corrected.

5. Thanks for moving the bottom horizontal bar up, if I wanted to move it up more, which padding would I adjust?

Thanks