Some questions

Support
#1

Hello. I’ve just purchased X Pro. I’ve tried to find answers in the forum and knowledge base, but can’t seem to find answers to the following questions, so would appreciate your help.

The questions relate to the home page at http://dev1.thumbprintbooks.ca

  1. How can I vertically center the text in the columns across from photos? On mid-size devices (768px-979px) the photo needs to be centered vertically with the text, so it seems the vertical centering needs to be on the section or row. I would also like the text on larger devices to have some padding left and right. Based on another support topic, I added the following CSS to the page:
    .vertically-center {
    display: flex;
    align-items: center;
    }
    In the Class for the Section, I entered .vertically-center but the columns are not centering.

  2. A further complicating factor for the text across from photos on this page is that for small screen devices I want to order the text to be first and the photo to be second. Is that possible?

  3. Can I change the names of Sections on the page? By default they are named Section 1, Section 2, etc. I would like to name them more descriptively so I can save some parts of them as templates for further use.

  4. How can I set up h1, h2, and h3 tags and how can I apply them to headings in text? Right now I can only see to do that in Theme Options–>Typography, but I’m not able to modify font size or weight there for the different headings. I don’t want to have to manually change each instance.

If you need it, I can provide you with an administrator account and password to access the site.

#2

Re: #1 & #4 — have changed the text to be headlines and have set vertical and horizontal centering. I have applied h1 and p tags, but don’t know where I format them.

Re #3 — figured out that if I double-click on the Section name, I can edit it.

#3

Hello There,

Thanks for posting in!

1.) I do not see that you added the custom class in any of the column or elements. To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns .x-column {
    vertical-align: middle;
}

4.) Please make use of the headline element instead. You will have more control to the headings when using this element.

Hope this helps.

#4

Thanks—that custom CSS worked.

Re 4), I am using the headline element. Is there a way to globally change all h1 or h2 formats?

#5

Hey @Adams,

You will need to add CSS like this.

h1, .h1 {
font-size:1.5em;
font-weight: bold;
}
h2, .h2 {
font-size:1.3em;
font-weight: bold;
}
#6

Thank you. For newcomers to the theme, who are used to defining key paragraph styles in other themes, the Pro development team might consider adding this ability in the Theme Options/Typography area for future builds…

#7

Thank you for your feedback. This has been submitted to our features request list.

#8

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