Can't make custom class on spb_row or text block to work

[Sotiris]

Well maybe I am tired or really missing something here but I am trying to style some “Rows” , text blocks and images in Swift Page builder and none of my custom classes seem to work.

For example I am adding the custom class “ourstory” to a Row (spb_row..) or to a text block
then calling it in my Custom CSS window

.ourstory {
    padding-top: 57px;
}  

and nothing happens. Even if I copy a more specific selector with firebug still no go.

While other custom classes for buttons for example work fine.
i.e.

.Mbutton a.sf-button.sf-icon-reveal span.text {
    display: block;
    padding: 16px 35px 20px 35px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0;
}

(I get a warning about display: block; with vertical align but have not removed it and yet no problems with it)

What am I doing wrong?

[Kyle – SUPPORT]

Hi

Well Rows have a padding settings, so anything you set in your custom css for padding on a row will be overwritten by the setting

– Kyle

[Sotiris]

Hmm guessed so.

However, I can’t change the following elements within the container either:

1) spb_content_element col-sm-12 ourstory spb_text_column (working if not within a row)

2) spb-asset-content (working if not within a row)

I am using a row + text block to create full width headings instead of the “Full width text block in Dante”. However even when selecting “Vertically Center Elements Within” in the row settings the text is does not appear “perfectly” centered within the heading.

This happens because in essence the row align setting uses the font/text container height to center the element and this also accounts for the “ascenders or tails” of the font used. So while the “text/font” container is indeed vertically centered it does not seem perfectly centered when viewed. To correct this I need to set top and bottom padding independently.

So setting the spb-asset-content padding with Firebug works but when I try to do it with CSS and it does not.

Yet when I use a text block outside a row, give it an extra class name and then try to set padding or margin again it does not work. Is this because text blocks also have their own settings?

This was not an issue with the full-width text block (previously) because the padding controls were not there either so nothing was overriding my css. I was able to setup a full width header with perfectly centered text in seconds and now I cant.

Unless I am doing something wrong this is a serious limitation.

What can you style with the custom classes in rows, text blocks and images? I can’t seem to find anything within the documentation.

[Kyle – SUPPORT]

It’s likely that your selectors are not correct, depending on what your asset is nested within the selector may need to change.

However for the title issue, you can just add padding vertical to the row and the text will be vertically centred anyway

– Kyle

[Sotiris]

Freaking unbelievable!

My selectors were fine. But nothing was working because of this entry at the bottom of my Custom CSS:

@media only screen and (max-width: 1200px) {

.mhs-tablet-land #mobile-top-text, .mhs-tablet-land #mobile-header, .mhs-tablet-land #mobile-header-sticky-wrapper {
        display: block;
        }
.mhs-tablet-land .header-wrap, .mhs-tablet-land #top-bar {
		display: none;
	}

Now anything below this does not work. (this works though). I entered my css above these lines and they work fine. Damn it I wasted hours on this and then I tested on another local installation and everything was working (as well as my custom classes above these lines).

And it seemed so weird not to be able to do such a simple thing!

Do you have any idea why this stops following css commands from working?

Regarding the vertical centering of the text, as I said above the text is being automatically centered through the row selector but depending the font used and its “ascenders” or “tails” or quarters having the same top & bottom padding (through the selector) is not ideal. While its container is centered “numerically” they eye does not perceive it centered because the the “center axis” is not on the “body” of the font but takes account of the upper (ascenders) and lower edges (tails).

I want alignment based on the X-height of the font characters and not based on the “ascender” and “descender” lines. (I am sure you have come across these many times with Illustrator or any similar design software.) The row vertical alignment feature does the second and it does correct for an automatic option. However, there are cases that more control is required and that’s were the custom classes come into play. It seemed REALLY weird to me that they were not working.

[Kyle – SUPPORT]

Glad you identified the issue, it’s because you haven’t closed off the media query with a }

As for the title, if you can provide a link I will provide you with some custom css

– Kyle

[Sotiris]

Well it all happens due to the fact that I am really a newbie when it comes to web design. I started from scratch 4 months ago (selecting a hosting provider, then trying to learn how to setup everything, research on CMS software and a lot more).

I fixed the title centering easily now that my custom classes work by adding a little padding to the top.

Again, thanks for your patience.

I really need some holidays soon!

[Kyle – SUPPORT]

Ok great, No problem

– Kyle