Have different alignment on desktop & mobile view

Support
#1

Hi there community!

On my site i have a headline thats centered but on mobile i want it to be left aligned…how do i do that?

#2

Hi Carolina,

Thank you for writing in, please inspect that headline element, and under Customize tab add the custom CSS below on Element CSS area

@media (max-width: 767px) {
	$el.x-text .x-text-content-text-primary {
		text-align: left;
	}
}

More details about Element CSS feature.

Hope it helps,
Cheers!

#3

it worked perfectly also under Customize tab add the custom CSS below on Element CSS area is it possible to customize the padding so its different on desktop vs mobile?

#4

Hi Carolina,

Yes, it’s possible and more recommended on Element CSS. May I know what part of the element padding should be changed? That’s because one element could have multiple structure, example, the image element.

/* main image element */
$el { 
padding: 10px;
}
/* actual element padding */
$el img {
padding: 10px;
}

The above example is also a sample of multiple structure element, but, if you just wish to change the direct padding of that element then you can simply add this to its element CSS

/* for mobile */
@media (max-width: 767px) {
	$el {
		padding: 20px !important;
	}
}

/* for tablet */
@media (max-width: 979px) and (min-width: 768px){
	$el {
		padding: 40px !important;
	}
}

/* for desktop */

@media (min-width: 980px){
	$el {
		padding: 80px !important;
	}
}

Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.