Docs

[Lely]

Hello Alvin,

Please add class mobile-spacing on the header class field. Then add the following CSS:

@media (max-width: 480px){
.mobile-spacing{
 margin-top:20px;
}
}

Above CSS means that if you add the class mobile-spacing on any element, it will add 20px top margin when the on mobile screen or when the size is <=480px;

To implement it on other pages or parts, just add class v-align-section on th content band/section class field and the class v-center to the column class field.

Then update above CSS to this:

@media (min-width: 767px) {
.v-align-section {
    position:relative;
}

.v-align-section v-center {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top:-94px;
}
}

Hope this helps.

[leverpunch]

This reply has been marked as private.

[Lely]

Hello Alvin,

Please update the above CSS to this:

@media (min-width: 767px) {
.v-align-section {
    position:relative;
}

.v-align-section .v-center {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top:-94px;
}
}

We have a typo error on this line: .v-align-section v-center {. Should be this:.v-align-section .v-center {. I missed the dot. We’re sorry for the inconvenience. Thank you for understanding.

[leverpunch]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove the class mobile-spacing from span tag and add it to h2 tag.

Update your code to :

@media (max-width: 480px){
.mobile-spacing {
margin-top:30px !important;
}
.mobile-header-font-size {
font-size: 22px !important;
font-weight: 400 !important;
}
}

Hope it helps.

[leverpunch]

This reply has been marked as private.

[Paul R]

Hi Alvin,

I can’t seem to replicate the issue on my end.

Please clear your mobile browser cache and try again.

Thanks

[leverpunch]

This reply has been marked as private.

[leverpunch]

This reply has been marked as private.

[Jade]

Hi there,

Please add a class to the column that has a negative margin on desktop then add this CSS:

@media (max-width: 767px) {
    .no-margin-mobile {
        margin-top: 0 !important;
    }
}

Please change no-margin-mobile to the class name you will add on the column.

Hope this helps.

[leverpunch]

This reply has been marked as private.

[Friech]

Hi There,

Define a class centered-columns on your custom css in customizer.

@media (max-width:  767px) {
	.centered-columns {
		margin-right: auto !important;
		margin-left: auto !important;
	}
}

And then apply this class centered-columns on your columns that you want to be center in mobile.

Hope it helps, Cheers!

[leverpunch]

This reply has been marked as private.

[leverpunch]

This reply has been marked as private.

[Rue Nel]

This reply has been marked as private.

[Author]

Posts