X Theme / Responsive Issue

[Gestionwebdw]

Hello,

I’m having this issue here where I can’t set up a page to look like i want on mobile devices… I know X theme has an option on which you can edit your website for each screen size, my problem is that when I make the changes i want on the cell phone option (because it’s the only size that messes up my page, all the other are fine…), it also changes the layout of the other screen sizes so, when i fix it on the cell phone option, it messes up all the other screen size and when I fix the big screen version, it messes up the cell phone…

Heres how it looks like on a computer (and how i want it to look) :

Nos Services 1

Services 2

Now, heres some screenshots of the mobile version, notice that when the content is on the right of the page (on PC version), the image goes below the content instead of going on top of it…

Nos Services mobiles 1

Nos Services Mobile 2

Nos Services mobile 3

Nos Services mobile 4

I want all the pictures to go on top of their content, it really breaks my design… how can I achieve that ?

Thank You !

Heres a link to the page i’m trying to fix if needed :

Nos Services - Voir ce qui est offert chez Gestion Web D.W

[friech]

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

@media (max-width: 767px) {
	.flex-me {
		display: flex;
    	flex-direction: column;
	}
	.flex-me .x-column.x-2-3 {
		order: 2;
		margin-top: 2em;}
}

Then add a CLASS flex-me to the ROW where the images are on the right.

No, this is not going to affect your desktop view as this specifically set to trigger with screen-size 767px and below (using @media (max-width: 767px)).

Hope it helps,
Cheers!

[Gestionwebdw]

Thank you it worked !

[friech]

You’re more than welcome, glad we could help.

Cheers!