Themeco Community

Hi there,

In your screenshot, h3’s are left aligned but when I checked on mobile they are centered. Should we follow what’s on your screenshot? Should we left align the h3’s on mobile? Is it related to center alignment of global h3’s?

How about we change your CSS to this,

  @media ( max-width: 767px ) {
  
/* changing the order of text and image */

.special-columns .x-container:nth-child(2) {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.special-columns .x-container:nth-child(2) .x-column:nth-child(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.special-columns .x-container:nth-child(2) .x-column:nth-child(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

/* background colors */

.special-columns .x-container:nth-child(1) .x-column {
background-color:#bdc0cb !important;
}
.special-columns .x-container:nth-child(2) .x-column {
background-color:#f1f1f1 !important;
}
.special-columns .x-container:nth-child(3) .x-column {
background-color:#bdc0cb !important;
}

/* h3 alignment */

.special-columns h3, .special-columns .h3 {
text-align: center;
float:none;
clear:both;
width: 100%;
}
  
  }

As you’ll notice, we no longer use page and section’s ID. Instead we added .special-columns and h3 alignment. All you need to do is add special-columns (no dot) to your section’s class input/attribute. It will then format that section with columns and background without affecting other page and section.

This may not be related to the issue you’re having to your screenshot, please clarify 🙂

Thanks!

Hi there,

Before we continue, let’s narrow it and make it cleaner.

1. Please add the provided CSS to customizer’s custom CSS instead of cornerstone’s custom CSS. That way, you can just re-use the special-columns class name.

2. Please don’t include non-CSS content to your custom CSS, I can see this string there “As you’ll notice,we no longer use ”

3. Please remove your added class names to columns and sections, let’s make sure that there are no other customization active on those sections/columns. Else, the recent CSS may not work.

Let me know when done and I’ll continue checking.

Thanks!

Hi,

Please note that css codes that are in Customizer > Custom > Edit Global CSS can also be use globally.

I checked your site and I didn’t see the class special-columns getting added in your sections.

Please add it so we can check why it is not working.

Thanks

Hi there,

1. It’s not taking effect on style.css, there could be malformed CSS or close bracket related issues. I added it using <style></style> separated from other CSS and it works. Please try adding it on customizer’s custom CSS.

2. That CSS was made for a section with 3 rows and 2 columns. What you did is 3 section with one row each, and 2 columns. The structure should be something like this,

[section class="special-columns"]

[1st row][column][column][/1st row]

[2nd row][column][column][/2nd row]

[3rd row][column][column][/3rd row]

[/section]

The purpose of that is to have 3 alternating rows. And what you did is 1 row per 1 section, hence there is no alternation. They are all first row .special-columns .x-container:nth-child(1).

Hope this helps.

Hi there,

Glad it works now.

1. You’ll just need to add more CSS, like this

/* changing the order of text and image */

.special-columns .x-container:nth-child(2),
.special-columns .x-container:nth-child(4) {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.special-columns .x-container:nth-child(2) .x-column:nth-child(1),
.special-columns .x-container:nth-child(4) .x-column:nth-child(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.special-columns .x-container:nth-child(2) .x-column:nth-child(2),
.special-columns .x-container:nth-child(4) .x-column:nth-child(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

/* background colors */

.special-columns .x-container:nth-child(1) .x-column,
.special-columns .x-container:nth-child(3) .x-column {
background-color:#bdc0cb !important;
}
.special-columns .x-container:nth-child(2) .x-column,
.special-columns .x-container:nth-child(4) .x-column {
background-color:#f1f1f1 !important;
}

2. Please add !important, other CSS is overriding it too.

.special-columns h3, .special-columns .h3 {
text-align: center !important;
..
..
..

Hope these helps.

Hi there,

It has multiple rows controlled by visibility (HIDE BASED ON SCREEN WIDTH). Remember that I recommended removing them 🙂

Also, that CSS works for odd and even, and hidden rows affect the proper count.

Thanks!

Hi,

To center your custom headlines, text and image, you can add this under Custom > CSS in the Customizer.

@media (max-width: 480px) {

body .h-custom-headline,
body .x-column,
body p {
   text-align:center !important;
}
}

Text and images are not centered by default in mobile. You can check our demo sites to be able to see how default settings works.

Home

Home

Home

http://demo.theme.co/ethos-1/