Docs

[yhshin1020]

Hey,

I have a google map shortcode set up on my website, and I would like to do two things:

1) overlap a content band in between the map and the next content band, like the picture below.

2) remove the margin between the map and the header above it (there is a small white space).

Thanks!

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.page-id-2331 div#x-content-band-2 {
    top: -200px;
    position: relative;
    background-color: rgba(255,255,255,0.5) !important;
}

.page-id-2331 .x-column.x-sm.vc.x-1-1.mpc-column p:empty {
    display: none;
}

Hope that helps.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Update previous code to :

@media (min-width:767px){
.page-id-2331 div#x-content-band-2 {
    top: -86px;
    position: relative;
    width: 50%;
    float: right;
    border: 2px solid;
}
}

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

Yes, everything inside the content band will follow.

To center it, remove float:right; and add left: 30%;

eg.

@media (min-width:767px){
.page-id-2331 div#x-content-band-2 {
    top: -86px;
    position: relative;
    width: 50%;
    left: 30%;
    border: 2px solid;
}
}

Can you provide us an image on how exactly you would like t to look like.

Thanks

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Rad]

Hi there,

That’s not possible, but you could try adding the background color to the column that has fade animation, then it will look as the box. Then using jQuery, move the map outside the column (direct to its section) and style it to look like as a background of column/box.

Thanks!

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

Kindly change the code that reads

@media (min-width: 767px)
.page-id-2331 div#x-content-band-2 {
    top: -350px;
    height: 40vh;
    position: relative;
    width: 50%;
    left: 30%;
    background: #fff;
    box-shadow: 5px 5px 5px 0px rgba(102,102,102,0.4);
}

to this

@media (min-width: 767px) {
.page-id-2331 div.entry-content.content {
     position:relative;
}
.page-id-2331 div#x-content-band-2 {
    z-index: 99999;
    top: 60px;
    height: 40vh;
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    box-shadow: 5px 5px 5px 0px rgba(102,102,102,0.4);
}
}

Hope that helps.

[Author]

Posts