Change the order of blocks for mobile only

Biobizz · March 2017

Hi,

I have a question regarding the way blocks are being displayed on mobile. I'm using the BeDietitian demo and right now the text and images on mobile look as followed:

text
image
image
text
text
image
image

But I would like to change the order for mobile only, so you get
image
text
image
text

While keeping the order like this for the desktop version. How can I do this? The URL is greenhouseonwheels.net

Thanks,
Mark

Bryan · March 2017

Hi,

This is not possible to achieve. You would have to have all images on left and text on right when on desktop.

thanks

Biobizz · March 2017

Hi,

Will there be an option to do this in the (near) future?

Thanks.

Bryan · March 2017

This is not possible because HTML and CSS works like this. It is not a theme issue, we cannot do anything about it.

Biobizz · April 2017

Hi,

We asked someone else to see if he could do it and he fixed it by adding this to style.css:

.home .section.mcb-section:nth-child(odd) .one-third{ float: right; padding-right: 0 !important; padding-left: 20px !important;}

@media screen and (max-width: 767px) {

    .home .section.mcb-section:nth-child(odd) .two-third h2{ text-align: left !important; }
    .home .section.mcb-section:nth-child(odd) .two-third p{ text-align: left !important; }

}

I hope this might help others as well.

Bryan · April 2017

Yes this is a fix but if you add another section i will break. We do not advise such changes.

Change the order of blocks for mobile only

Comments