How to align text in outdated elements?

Support
#1

Hi,

  1. Simple question here, using your Konnect App demo website and some of the elements are old and maybe some global settings are effecting things. I’m trying to align this header as seen in the images.

Do you have some custom css I can use on elements to align them when the normal control won’t work?


  1. How do I change the menu/ header drop down look? I’m using the X theme (standard version) on both of these sites but am struggling to find what I have set different on the correct one.

Correct: (What we have on another site.)

Not Correct: (What we are trying to change.) we don’t like the double grey line and the dull “Checkout button”. how can we make it look like the above (correct) image?

Thank you as always!

#2

Hi,
Just checking in as it’s been more than a day without a reply.

Any help is appreciated.

Thank you!

#3

Hey @AK49_Logan_907, thanks for writing in!

As for centering things, it’s important to keep in mind that text alignment is different from element alignment. What that effectively means is that you could have the text of an element centered, but that element itself might be aligned to the left or a section (similar to the screenshot you’ve provided above). To ensure that an element is centered, there are a couple of things to be aware of / try out (each approach will depend on the situation and your personal taste for solving these layout considerations):

  1. The first thing you can try to horizontally center an item is to ensure that the left and right margin values are set to auto. Using auto margins on the sides of your element will push it away from that side, so using auto on both sides will effectively “push” the element into the horizontal center.
  2. If you’re using the advanced control configuration, you can use the flexbox positioning on the Row’s Columns to place content inside that column. There’s a lot of information we cover on this here and here.

As for the header’s in X, the only things that can generally be changed are the colors to suit your design. However, the gray lines you’re referencing here are part of the Stack you’re using. If you want this to match the first example you sent, try switching to the Integrity stack under your Theme Options. This should swap out the header style to the version you want. Do keep in mind that you may need to make additional CSS tweaks to get things looking the way you want when switching Stacks.

Cheers!

#4

" left and right margin values are set to auto. ’
Dude that was it, thank you! for whatever reason, I think they defaulted to 0. I can use this on so many different things and should really help. Thank you, a great trick I never knew of. Although it’s really simple just never knew that was a thing.

I have been running into an issue where the text or element is stuck in a column container of sorts. At least that’s what I think is happening. I’ve been playing with the settings but can’t get the element unlocked so it goes across more of the page. Any idea?

Thank you!

#5

Hi @AK49_Logan_907,

Glad that margin auto works for you.

Regarding the column container issue, columns do not really have a container (unless you apply a custom CSS), it’s either the Row’s Inner Container (which you already turn off), or maybe you applied a width or max-width to your Headline element, please check that.


If the issue persists, please provide us a direct page URL where we can see the issue so we can take a look.

Thanks,

#6

Hi,

Ya I can’t seem to locate what is holding it. Adding a secure note so you guys can take a look.

Two extra small issues if you wouldn’t mind taking a look. :slight_smile:

  1. How can I change the font size on our front page? trying to increase the size but not sure if new/old elements are clashing.

  2. How do I change the color on your default sales sheet? Would like to change it to #0981b9. Would also need to change the sub-headline “Most popular” to a white color if possible.

Thank you so much!

#7

Hi @AK49_Logan_907,

Thank you for the credentials, it’s this custom CSS that is giving you the text container issue.

As you can see when I commented out this max-width: 400px; the text gets fullwidth.

Please enable the Advance Mode this will enable you to see all the options available on the V2 Elements, including text formatting and styling on applicable elements.



Regretfully, the classic elements do not have that many options. Please add the custom CSS below to your Page > CSS instead.

/*featured table background*/
.x-pricing-column.featured h2 {
	background-color: #0981b9;
}
/*feature subheading color*/
.x-pricing-column h2 span {
	color: white;
}

Hope it helps,
Cheers!

1 Like
#8

More great help.

Thank you! I completely forgot about the advanced options and couldn’t pin down why those options were missing, Thanks again!

#9

We are delighted to assist you with this.

Cheers!

#10

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