How to align the entire section differently on desktop and header

Support
#1

Hi there,

Im trying to align everything inside a section to be left aligned only on mobile and every other screen it can be centered aligned. How do I go about achieving this?

I tried putting in this code but it didnt work or maybe I put it in the wrong spot:

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

#2

Hi Carolina,

Thank you for writing in, your Element CSS code will work on Headline element only.

For the text element, you can have.

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

And if you want the entire content of a Section, add this on the Section’s Element CSS area instead.

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

Make sure to add the Element CSS on the target element/section.

Hope it helps,
Cheers!

#3

It worked but is there anyway we can add smooth scroll this ?

#4

Hey Carolina,

I’m sorry but I don’t understand the relation of smooth scroll to the left alignment of text. Would you mind clarifying what you wanted to achieve?

Thanks.

#5

Oh I apologize the code above worked perfectly…the smooth scroll was in regards to another post, but maybe you can help me out…I created anchor links on my site but right now when you click on the ancho links they take you to the section very fast and I was wondering if there is something we can do for smooth scrolling

#6

Hello Carolina,

We do not see any link in the given url.
Could you please clarify a little further? It is best that we reply in your other thread to avoid getting off topic or confusion to our staff in responding the link issue.

Thank you.

#7

Of course! i figured it out thank you

#8

You’re welcome! :slight_smile:

#9

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