Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Remove space between columns

Featured Lock Resolved Issue
Hi,

I am using Page Builder on a page where I want to put several images in 2 columns. I want to remove spaces between images, as I am sending you in attachment.

So, how do I remove the space between the two columns?
I know there are some margin issues, but in COLUMN options or ROW options, nothing works.
I tried put margins -15px, but nothing is changed.

Thanks!

Attachments (1)

  • layout-02.png
    layout-02.png 4.6 KB

15 Answers

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
i have spacing and first image modal.

Rifat Wahid Alif - Staff

More than a month ago #Permalink
go to your pagebuilder, row settings here you will get padding and margin option. check it out. our pagebuilder default row's margin top is: 30px;

verdelino

More than a month ago #Permalink
Hi,

I don't have a problem with top and bottom margins/paddings.

I have only one row.
This row has two columns.
Each column has 4 images, one below another. Those 4 images in each column are "joined" together, they have no spaces between.

What I have a problem with, is, that my left column and my right column (in the same row) have vertical blank space between.

In the attachment I sent you earlier, the top image is the situation I have now, and the bottom image is the situation I want.

When I change paddings and margins settings of row and columns, nothing ever changes the vertical space between the two columns.

Thank you

Rifat Wahid Alif - Staff

More than a month ago #Permalink
could you please share your url please ?

verdelino

More than a month ago #Permalink
Hi,

I sent you url and username / password in private message.

Thanks

verdelino

More than a month ago #Permalink
Ok, so we've been texting here on the forum for the last few days and I don't know if you have a lack of interest in my problem or am I so bad at english or bad at explaining the problem.

So, I am sending you a printscreen of:

1.
my homepage, where I have images in two columns.
The FIRST / LEFT column has an image of a cat's feet, under this image is an image of a red square, under this image is an image of a dog... and so on.
The SECOND / RIGHT column has an image of a purple square, under this image is a bunny.... and so on.

Each column (the left and the right column) has more images, and those images are JOINED TOGETHER, so there are no paddings. or margins.

THE PROBLEM IS: I want have my columns joined. So, my left column should be joined to my right column, and I don't want the blank space between my left and my right column. For example, the images of a cat's feet and a purple square - I want them together, with no spaces between those images.

2.
I am also sending you the printscreen of my Page builder, where you can see that I have two columns and each column has images inside. I can see there are column options, row options.... But when I change padding or margin of column or rows, nothing ever changer and there are still blank spaces between left and right columns.

So, in your first answer, you told me to change the top margin. TOP + BOTTOM margins are just fine! I don't need to change anything in my top or bottom margins.

I need to change my right margin in my left column, and my left margin in my right column.

In your second answer which you submitted in my inbox, you told me that you have CHANGED my first image into a POPUP MODAL, which did not change apsolutely nothing beside the fact, that my first image is now a popup modal.

So, I assume that I managed to explain everything now.

So my question is:

Is it possible, to remove margins/paddings in my columns, or is it not possible? IF it is possible, could you please tell me how?

If there is somebody in this support team who can understand my question, I would appreciate the answer.

Thank you

Attachments (2)

  • previews-01.png
    previews-01.png 610.7 KB
  • previews-02.png
    previews-02.png 57.2 KB

verdelino

More than a month ago #Permalink
OK I can see you made those changes directly on our website.

Thank you!

If it is no problem, you can post a reply on how you did it, for other people who had the same issues, so they can manage the issue themselves.

Thanks

Rifat Wahid Alif - Staff

More than a month ago #Permalink
i just wrote this css in custom.css file:

.no-row-padding .sppb-row .sppb-col-sm-2,
.no-row-padding .sppb-row .sppb-col-sm-3,
.no-row-padding .sppb-row .sppb-col-sm-4,
.no-row-padding .sppb-row .sppb-col-sm-5,
.no-row-padding .sppb-row .sppb-col-sm-6,
.no-row-padding .sppb-row .sppb-col-sm-7,
.no-row-padding .sppb-row .sppb-col-sm-8,
.no-row-padding .sppb-row .sppb-col-sm-9,
.no-row-padding .sppb-row .sppb-col-sm-10,
.no-row-padding .sppb-row .sppb-col-sm-11{
padding: 0;
margin: 0;
}

.no-row-padding .sppb-addon-container .sppb-addon-single-image img,
.no-row-padding .sppb-modal-selector img{
width: 100%;
}


and change your single image addon to modal in page builder.

- Thanks

chierasr

More than a month ago #Permalink
And how is the code if I need to apply that into a featured box or pricing box? thanks

Rifat Wahid Alif wrote:

i just wrote this css in custom.css file:

.no-row-padding .sppb-row .sppb-col-sm-2,
.no-row-padding .sppb-row .sppb-col-sm-3,
.no-row-padding .sppb-row .sppb-col-sm-4,
.no-row-padding .sppb-row .sppb-col-sm-5,
.no-row-padding .sppb-row .sppb-col-sm-6,
.no-row-padding .sppb-row .sppb-col-sm-7,
.no-row-padding .sppb-row .sppb-col-sm-8,
.no-row-padding .sppb-row .sppb-col-sm-9,
.no-row-padding .sppb-row .sppb-col-sm-10,
.no-row-padding .sppb-row .sppb-col-sm-11{
padding: 0;
margin: 0;
}

.no-row-padding .sppb-addon-container .sppb-addon-single-image img,
.no-row-padding .sppb-modal-selector img{
width: 100%;
}


and change your single image addon to modal in page builder.

- Thanks

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
This code works for anything in pagebuilder:

.no-row-padding .sppb-row .sppb-col-sm-2,
.no-row-padding .sppb-row .sppb-col-sm-3,
.no-row-padding .sppb-row .sppb-col-sm-4,
.no-row-padding .sppb-row .sppb-col-sm-5,
.no-row-padding .sppb-row .sppb-col-sm-6,
.no-row-padding .sppb-row .sppb-col-sm-7,
.no-row-padding .sppb-row .sppb-col-sm-8,
.no-row-padding .sppb-row .sppb-col-sm-9,
.no-row-padding .sppb-row .sppb-col-sm-10,
.no-row-padding .sppb-row .sppb-col-sm-11{
padding: 0;
margin: 0;
}


and you have to use no-row-padding class in row.

- Thanks

joeb1000

More than a month ago #Permalink
I copied your ccs code into the custom ccs area, but this did not work. Also, when i need to employ padding, my entries are ignored. Do you have a video of the procedure to see where i go wrong?

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
Could you please share your URL then I can give a perfect look?

- Thanks

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
Please try this CSS:
.no-row-padding .sppb-row .sppb-col-sm-2,
.no-row-padding .sppb-row .sppb-col-md-2,
.no-row-padding .sppb-row .sppb-col-sm-3,
.no-row-padding .sppb-row .sppb-col-md-3,
.no-row-padding .sppb-row .sppb-col-sm-4,
.no-row-padding .sppb-row .sppb-col-md-4,
.no-row-padding .sppb-row .sppb-col-sm-5,
.no-row-padding .sppb-row .sppb-col-md-5,
.no-row-padding .sppb-row .sppb-col-sm-6,
.no-row-padding .sppb-row .sppb-col-md-6,
.no-row-padding .sppb-row .sppb-col-sm-7,
.no-row-padding .sppb-row .sppb-col-md-7,
.no-row-padding .sppb-row .sppb-col-sm-8,
.no-row-padding .sppb-row .sppb-col-md-8,
.no-row-padding .sppb-row .sppb-col-sm-9,
.no-row-padding .sppb-row .sppb-col-md-9,
.no-row-padding .sppb-row .sppb-col-sm-10,
.no-row-padding .sppb-row .sppb-col-md-10,
.no-row-padding .sppb-row .sppb-col-sm-11,
.no-row-padding .sppb-row .sppb-col-md-11{
padding: 0;
margin: 0;
}


and insert no-row-padding custom class in the row.

- Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 141
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 90
Toufiq

Toufiq

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289548

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us