Docs

[nonprofitwork]

Is there a way to display three columns side by side on mobile?

I am using renew.

[Joao]

Hi there,

Thanks for writing in! It may be possible with some CSS. However we need to be able to view your site to test. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Also please provide details about which sections / columns you would like to change it.

Thanks

Joao

[nonprofitwork]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media (max-width:960px){
.x-column.x-md.x-1-3 {
    width: 28%;
    float: left;
    margin-right: 1%;
    margin-left: 4%;
}

.x-colophon.top .x-column:first-child {
    margin-top: 0;
  }

.x-colophon.top .x-column:first-child {
    margin-top: 3em;
  }

.x-container.width {
    width:100%;
}
}

Hope that helps,

Joao

[nonprofitwork]

I added that custom css but it did not resolve the problem. Any suggestions?

Thanks again for all the help.

[Joao]

Hi There,

Upon Checking your website the code is working as expected. Maybe you mean it something different?

Please provide more details.

See screenshot of how your site looks on mobile, in case you can´t see it like this, please clean your browser cache.

Let us know how it goes,

Joao

[nonprofitwork]

The footer is working with it displaying side by side, but the content of the page is not. I’m looking for a way to display the three columned content of the page side by side.

[Lely]

Hi There,

Thank you for the clarification. Please add class custom-x-1-3 to each of those one third columns class field. Then add this CSS instead

@media (max-width: 767px){
.custom-x-1-3 {
    width: 28% !important;
    float: left !important;
    margin-right: 1% !important;
    margin-left: 4% !important;
}
}

Above CSS will only alter columns with class custom-x-1-3 when the screen size is less the or equal to 767px.

Hope this helps.

[nonprofitwork]

Thank you this worked great.

[Joao]

Great to hear it,

Let us know if you need help with anything else.

Joao

[Author]

Posts