Mobile Optimisation

[texaskiwi13]

Hi,

I wanted to check and see what best practice was for mobile optimisation in terms of getting the layout correct.

Is it better to have duplicate hidden sections, one for desktop and one for mobile, for sections where you need to make changes to the layout? This is what I’ve done in the past as it’s quick, but is that the best way to do it in terms of loading times, etc. If not, what do you recommend.

I also wanted to see if there is some CSS that I can enter to adjust which column appears on top and bottom when the site collapses down for mobile. I could swear I read a support thread on it in the past, but I can’t find it for the life of me. For example, I would like this section to have the headline and then the image on top of the text when it collapses down for mobile.

Thank you!

Ashley

[thai]

Hi Ashley,

We can use the custom CSS to swap the columns on mobile screen size but the image is still above the headline.

Please try with the custom JS instead.

• Assign the my-image class to your image:

• Assign the my-headline class to your headline:

• Add this custom JS:

jQuery(document).ready(function($) {
	if($(window).width() < 768){
		$('.my-image').insertAfter($('.my-headline'));
	}
});

Let us know how it goes!