Themeco Community

Hi there,

The second sections image column still has visibility classes and it’s affecting how it’s displayed on mobile. Would you mind providing your login credentials? It would be easier and faster if I can remove conflicting setup right away, it needs to be standard columns with standard visibility.

Thanks!

Hello There,

Thanks for providing the information. I have edited the page and removed the visibility classes. please check your page again.

I would highly suggest that you give further clarifications on what or how do you want to columns to look like on desktop and smaller screens. Perhaps by sending us several screenshot, one for desktop and one for smaller screen could really help in getting what you have wanted to achieve.

Thank you.

Hi there,

Please add this CSS,

 
  @media ( max-width: 767px ) {
  
/* changing the order of text and image */

.page-id-8578 #x-section-3 .x-container:nth-child(2) {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.page-id-8578 #x-section-3 .x-container:nth-child(2) .x-column:nth-child(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.page-id-8578 #x-section-3 .x-container:nth-child(2) .x-column:nth-child(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

/* background colors */

.page-id-8578 #x-section-3 .x-container:nth-child(1) .x-column {
background-color:#bdc0cb !important;
}
.page-id-8578 #x-section-3 .x-container:nth-child(2) .x-column {
background-color:#f1f1f1 !important;
}
.page-id-8578 #x-section-3 .x-container:nth-child(3) .x-column {
background-color:#bdc0cb !important;
}
  
  }

That should do it. Cheers!

Hi there,

Should it be applied to those columns or globally?

Please add this as well,

@media ( max-width: 767px ) {

.page-id-8578 #x-section-3 .x-column {

text-align: center;

}

}

This will center all inline elements but with no effect on floating elements.

Cheers!

Hi there,

Would you mind providing all other pages or elements that are affected? CSS may depend on how you added them, alignment not only by text-align, it could also due to float. Hence, overriding CSS may be different depending on how the alignment is applied to existing element. But if it’s just about h3, then we can simply do it like this 🙂

@media ( max-width: 767px ) {

h3, .h3 {

/* let's center it */

text-align: center;

/* we don't know if there are floating h3, but let's make sure by turning it off */

float:none;

/* complement the float:none */

clear:both;

/* text alignment will only work on wide row */

width: 100%;

}

}

This is just an assumption, this may also affect other h3′ that are meant to float.

Hope this helps.

Hello There,

Okay then, please let us know how it goes. Would you also point out which of the section you’d like to use so that we can update the code above?

Thank you.