Docs

[Andrei]

Hello, I would like to make the content of the page responsive on mobile. On tablet the content is ok, with one exception: the last image, manifesto, is not aligned with the rest of the paragraphs. I can align it with margin and padding but the problem is that when I change the device (the screen width), the alignment breaks. On mobile the content is out of the screen on the right.

Also I would like to disable the fade effect on mobile.

The page I am talking about is https://sinestezic.com/about-us/

Thank you,
Andrei

[Rad]

Hi there,

Thanks for writing in.

Please add this Custom CSS as well,

@media ( max-width: 767px ){
.page-id-835 .x-container.width {
    width: 100%;
    padding: 0 5% !Important;
}
.page-id-835 .x-block-grid, .page-id-835 .x-text {
    width: 100% !important;
    margin-left: 0 !important;
}
.page-id-835 .x-block-grid li, .page-id-835 .x-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
}

Though this only applies to few elements. You don’t have uniform layout and class names, it looks like every of your content is unique with their own selectors.

Example, you have ourstoryphoto that never used anywhere, hence I decided to use .page-id-835 .x-block-grid li to select them all. Then, another structure unlocksensesgrid but it’s a regular text instead of a block grid.

That CSS may not fix all, let’s see what’s left after that solution.

Cheers!

[Andrei]

Hi Rad,

Thank you for your reply. It works except 2 things:

The photo from “Inspired BY” which needs to be expanded at the edge of the ccontainer and the manifesto photo which needs to be aligned with the other containers.

[Paul R]

Hi Andrei,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1201px) {
.page-id-835 .x-block-grid .x-block-grid-item.ourstoryphoto {
     padding:0 !important;
}
}

.page-id-835 .x-section.manifestosection {
     padding:0 !important;
}

.page-id-835 .x-section.manifestosection .manifesto {
     left:0;
}

Hope that helps.

[Andrei]

Hi Paul,

Yesss it works! Thank you very much. There is one more small problem. The text on tablet is smaller than the text on phone. In the CSS code they are the same size. Also How can I completely disable the fade animation? I tried a code I found on the forum but the elements are still moving up when I scroll.

[Andrei]

I found another issue. The manifesto photo is not aligned on big screens.

[Rad]

Hi there,

Are you testing on the actual device? It will look small on browser developer preview since the viewport is scaled down. Hence, elements will look smaller.

And about manifesto, please change this css,

.page-id-835 .x-section.manifestosection .manifesto {
     left:0;
}

to this

@media ( max-width: 767px ) {
.page-id-835 .x-section.manifestosection .manifesto {
     left:0;
}
}

Thanks!

[Andrei]

Hi Rad, thank you very much. Do you also know how can I disable fade effect on mobile?

[Rad]

Hi there,

Please try this CSS,

@media ( max-width: 767px ) {

.x-column[data-fade="true"] {
    transition: initial !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate(0px, 0px) !important;
    transition-duration: 0ms  !important;
}

} 

Hope this helps.

[Andrei]

Thank you very much. It works.

[Thai]

If you need anything else please let us know.

[Author]

Posts