Trouble with centering two columns on page

[aaron_softwarepromotions]

I have a section which contains a row with 4 columns.

As you can see in this video, it’s having issues with responsive behavior:
https://www.screencast.com/t/G5i9NpeO

Have I constructed this incorrectly, or is there something that I can do so that the two center columns stay in the center on large screens?

This is the page in question: https://www.softwarepromotions.com/google-adwords/

Thanks and I look forward to your reply.

Aaron

[ruenel]

Hello @aaron_softwarepromotions,

Thanks for writing in!

You are using a legacy section. You can enable the Column Container and set up two columns only. Those extra columns can be removed.

If this is not helping, please provide us access to your site so we can inspect the page. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Regards.

[aaron_softwarepromotions]

Here are the details:

[ruenel]

Hello @aaron_softwarepromotions,

Now, I understand what you are trying to do. You cannot achieve it with your current layout structure. To accomplish what you have in mind, you will have to do the following:
1.) Set up a new Section element with your row to have two columns only.

2.) You need to use a transparent background color for your section.

3.) Save your work and view the live page.

4.) You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use for the lower layer background color.

5.) And then back in the editor, click the “Customize” tab and insert an inline element CSS with the selected selector in #4.

6.) Go on this website, https://cssgradient.io/, to get your CSS linear-gradient background color code.

7.) Apply the color to the background section.

8.) You will have to change the degrees of the gradient for mobile and you will have to use the @media CSS block to be able to do that.

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Please see the secure note for the example.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Kindly let us know how it goes.

[aaron_softwarepromotions]

Thanks to your assistance, I was able to accomplish this.

If you check now, you can see that it works but I had to still have two separate sections.

One section that would be for mobile and one section for desktop. I would then hide according to the screen size. Using the x-hide-md x-hide-sm x-hide-xs and so on.

Is there a way to use only the one desktop section, but then tell the rows to stack instead of display side by side on mobile?

If so, is there a way to deal with the colors if the columns were stacked?

@media only screen and (min-width: 768px) {
  #google-ads-services-desktop {
    background: rgb(144,182,162);
    background: linear-gradient(90deg, rgba(144,182,162,1) 50%, rgba(140,172,108,1) 50%);
  }
}

By the way, what does that “1” mean in the attached screenshot? Does that mean that I have custom CSS in that section?

Thanks and I look forward to your reply.

Aaron

[ruenel]

Hello Aaron,

You only need to have 1 row with 2 columns. All you just need to do is to change the layout responsively which can be done in the Row settings, Row > Layout > Template. Please check my example demo in the secure note below.

This is the element structure:

On the Row 1 element settings, I have these responsive layout settings:

Default:

Clicking on the word “Template” would launch the Responsive Layout settings.

The responsive layout settings allow you to have a two columns (50% 50%) layout on larger screens while having only 1 column layout (100%) when the screen gets smaller.

To know more about the Responsive Element styling, please check this out:

• https://theme.co/docs/responsive-styling

Best Regards.

[aaron_softwarepromotions]

Thank you so much. That’s perfect. I’ve already applied it to my live site.

Here’s the CSS that was added to the section, in case anyone wanted to see that:

$el .x-bg .x-bg-layer-lower-color {
  background: hsl(148, 21%, 64%);
  background: -moz-linear-gradient(90deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
  background: -webkit-linear-gradient(90deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
  background: linear-gradient(90deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="hsl(148, 21%, 64%)",endColorstr="hsl(90, 28%, 55%)",GradientType=1);
}

@media (max-width: 979px) {
  $el .x-bg .x-bg-layer-lower-color {
    background: hsl(148, 21%, 64%);
    background: -moz-linear-gradient(180deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
    background: -webkit-linear-gradient(180deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
    background: linear-gradient(180deg, hsl(148, 21%, 64%) 50%, hsl(90, 28%, 55%) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="hsl(148, 21%, 64%)",endColorstr="hsl(90, 28%, 55%)",GradientType=1);
  }
}

Again, thank you!

[marc_a]

Hi @aaron_softwarepromotions,

We’re glad that my colleague @ruenel was able to help you with your issues. If you have any other concerns or clarification regarding our theme features, feel free to open up a new thread.

Thank you.