Create a row with a 50/50 column with no padding or margins

It’s been a while since I have used X, so please excuse this simple question, but seems a lot has changed since I last used it. I am just trying to create a row below the fold on my home page where half of the row has a black background with no padding or margins in the section and the other half is white, same, no padding or margins. Then within the black column have text, and in the white column a video or image.

I have added the row and then added a 50/50 column to it, but when I try and make the left column black there is padding all around it in the row. I can’t figure out how to adjust this so the half is all black (left, bottom and top). There used to be a way to control the padding…which I am not seeing now.

Also, how do I get rid of the line at the fold on the home page? The color of the line is the nav bar color…so I see how to change the color in options…but I just don’t want the blue bar at the bottom of the Rev Slider at the fold at all. I just want the black box (on one side), described above, to go right to the edge of the slider at the fold.

Thanks

Hi @444media,

Simple or complex, we are always glad to help :slight_smile:

First, please make sure that you are using updated plugins and theme. Here’s our changelog and here’s the guide on how to update. Please also don’t forget to clear cache after the update.

It might be coming from the section of this ROW. By default, section has 45px top and bottom padding:

If in case you are seeing limited settings on elements, please make sure you ADVANCE MODE is to ON. Go to X > Settings or Pro > Settings, then at the bottom under USER PREFERENCES set it to ALWAYS ON

For ROW settings too, if you don’t want GAP between columns set the that settings to ZERO. You might also want to turn off GLOBAL CONTAINER so that it will occupy the entire section

Unfortunately, I am confuse when you say fold on the homepage. To help you better with this, please share the specific page URL with issue and which section. If you can give us a screenshot of what you want to achieve, that will greatly help. Thank you.

Thank you! That’s why I love you guys! :grin:

So now I turned on Advanced Mode and am seeing a lot more controls that I have seen before. That’s great! But I am having an issue with the section in getting it centered on the page and having the columns split 50/50 evenly on the middle of the page. For some reason, as you can see at cheaperwaterbills.com (or screenshot attached), the section is pushing everything to the left of the screen. I have added a headline, text and two buttons in the black section and an image in the white section. But formatting, as you can see, is way off and not figuring out how to get it centered and even. I’ve played with the padding and margins of the section, row and column, and just can’t figure out why it’s doing what it’s doing.

Also can’t seem to figure out why the “watch video” button has the text on two lines. No matter what spacing I do, the text remains on two lines…I want it on one line. Can I also add a “play button” icon?

Finally, I see that I can cover up the blue line mentioned in the original post that is at the bottom of my Slider Rev slide, but how do I eliminate the blue line anyway? See attached screenshot It’s the same color as the Nav Bar hover color I believe, so seems to be related.

Thank you so much for your help!!

Hello @444media,

Your columns were not at the middle of the page because of your margins. Please check the margin of your section settings. It must be set to 0.

The row settings must have left and right margins that needs to be set as “auto”. If you set it to 0 or any negative number, the columns will move to the left of the page.

We would love to know if this has worked for you. Thank you.

Unfortunately that did not work. See site or attached screenshots. I already had the left and right margins of the row set to auto. And I set the section margins all to 0. Did not work.

And what about the blue line question (there is a blue line that appears at the bottom of the slider rev image at the fold of the site)? I see that I can cover it with the section, with certain margins. But wanted to see if I can just get rid of it all together.

Thanks so much for your help!

Hi @444media,

In that case we need you to clear cache. We are seeing different setting on your frontend. See this screencast: https://screencast-o-matic.com/watch/cq6TQsudTu Row right margin is not set to auto.

This is because of right padding added on the ROW. Please remove it.
Then inside this ROW you set to have 2 columns, 50/50 width each. Watch video button doesn’t fit on that 50% width. Please just use 1 column and then add 2 buttons inside. To make sure it is side by side, set column FLEXBOX LAYOUT to OFF. Then add right margin on watch button to have space between the 2 buttonns.

Yes, you can add icon on the button. Go to GRAPHIC TAB set this to ON:

An option to add Graphic will appear below that. Then choose play icon.

It is added via the integrity stack you were using. Please add the following on your Page CONTENT CSS to remove it:

.x-slider-container.below {
    border-bottom: none;
}

Hope this helps.

Hi Lely…thanks for getting back to me.

So I have cleared the cache (and had done so before) and am seeing that the row right margin is set to auto as far as I can see…(see screenshot from previous post). I can’t do anything to adjust it anyway, as it is “greyed” out…as in if I try and put my cursor in there it changes to a circle with a cross through it (meaning it can’t be adjusted). I am not clear on what you are trying to show me in your screencast.

I put up a quick coming soon page, so the page in question is not at the home page anymore. Here is the link to the page with issue:

http://cheaperwaterbills.com/home-x/

Hello @444media,

Please check your Row settings again. When I inspect the page, it is having a margin of 2px 3 0px auto.

If nothing is helping, provide us access to your site so that we can check your settings and resolved your issue. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

OK…sent a secure note with login info. Attached screenshot again shows that Row margins are set to Auto, as far as I can see.

Hi @444media,

I can see the issue on ROW. There are some settings that cannot be reset. Which I can’t see why even after I clear the cache.

Since that is taking so long, I just redo the ROW below it. Just the way you like it. Please check the ROW settings and flexbox settings for columns and padding. I did not use fixed margin on you header but rather padding on columns. To make sure image is center, I also use flexbox settings on the right column.

I also notice you are using negative margin. I do advise to avoid it because it cause issues on IE. We can center columns using FLEXBOX. For more information, please subscribe to our youtube channel. There are 2 parts videos in there discussing flexbox. It will really be useful on development once you are familiar with it.

Hope this helps.

Thank you Lely! I figured there was something wrong there. I was going to just try and start over again as well, and do what you did, but the issue still remains in a way…

I am trying to get the left column to be all black…from top to bottom left to center…and the white column on the left the same (but all white)…then of course with the content centered in each box.

Right now there is the white boarder around the black box…and any adjustments I make to it and just affect the content inside the box.

I feel like this should not be this difficult to accomplish.

Thank for your help!

(Note: I duplicated the Section you did as a back up, so I can play with the settings and not lose at least what you did)

Hello @444media,

You added 1001px in the width and not the max width of the row settings. To save us time, I have edited your page in this way:

I did the following:
1.) I created a section with a row and two columns
2.) In the row settings, I disabled the Global Container.
3.) I added a black background color for the left column and a white background color for the right side.
4.) In each of the columns, I inserted another row with only one column. I set a width of 100% and a maximum width of 500px for each rows.
5.) In each of the columns, I enabled the Flexbox layout options and aligned the contents
6.) I copied the columns in your previous sections and paste it to my new columns.

Please check your site now.

Please check

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