Docs

[leverpunch]

Hi,

I would like to format the alignment of my page content. Please see the attached screenshot (design mockup) and advise how I can achieve that. It must be centralised vertically & horizontally when viewed on mobile.

Thanks!
Alvin

[leverpunch]

This reply has been marked as private.

[Lely]

Hello Alvin,

Please note that this custom CSS will display your columns side by side even on mobile:

.x-column.x-sm.vc.x-1-2 {
    width: 50% !important;
}

By default, columns on mobile will be stacked up, 100% in width. If you really want it side by side even on mobile please add class custom-x-1-2 for each of this 1/2 columns. Then replace above CSS with this:

@media (max-width: 767px){
.x-column.x-sm.custom-x-1-2 {
    float: left;
    width: 50%;
}
}

This will make sure that it will not affect every 1/2 columns on the entire site just when custom-x-1-2 class is applied. Then I can see that you have GAP element to control the spacing on desktop. Please add it inside the VISIBILITY element then set VISIBILITY TYPE :HIDDEN PHONE. This will make sure that the GAP is only visible on desktop screen. To make it center, please add center-text to columns class field. Please note that you can build your entire content inside Visibility element. So you will have 2 content. One for desktop view and another one for mobile. This will make sure that you can achieve your desired look per screen size.

Hope this helps.

[leverpunch]

This reply has been marked as private.

[Lely]

Hello Alvin,

Yes, we can use the class. Other option is the GAP element. Add Visiblity element and then add GAP element inside. That way we can control the spacing per screen view.

For the next question, the answer is Visibility element too. We have to add two Visibility element. The first one is Visible on Desktop while the second is Visible on Phone. Inside each of this Visiblity element, build the entire content by adding the image and text. With this approach, we have total control on how you display each element per screen view.

Hope this helps.

[Author]

Posts