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

Your Time: Our Time:

Problems with padding

Featured Lock Resolved Bug
Please take a look at p490824.mittwaldserver.info. Unde the first large picture there four smalle ones.I am trying to indent the text by setting the left margin for each section to 20 px, but the setting does not reflect on the frontend.

How can i reduce the blank row space between the pictures to about 5 px?

8 Answers

Pavel

More than a month ago #Permalink
You should add css units. Not just the number 20, but 20px.
Now you have it looks like this.
http://dl3.joxi.net/drive/2018/12/09/0008/0401/545169/69/5571e8211c.png
It must be so.
http://dl3.joxi.net/drive/2018/12/09/0008/0401/545169/69/86b003cb26.png

Pavel

More than a month ago #Permalink
How can i reduce the blank row space between the pictures to about 5 px?

Paste the following code into the CSS field in the SP PB page settings.

.sppb-col-md-3 {
padding-right: 2.5px;
padding-left: 2.5px;
}

http://dl4.joxi.net/drive/2018/12/09/0008/0401/545169/69/33ab53d0cc.png

joeb1000

More than a month ago #Permalink
Pavel, thank you very much, you helped me a lot.

one other question: the text under the four pictures is different in length. I need to change the background to a very light grey. How can i make the boxes with shorter text to have the same length than the one with the longest text?

joeb1000

More than a month ago #Permalink
Pavel,

there is a small problem with your CSS suggestion. When i apply the code, the section is about 20 px larger on the front and end. Trying to curb the extra size by adding some padding did not work. Have any idea what i could do? padding.jpg

Attachments (1)

  • padding.jpg
    padding.jpg 66.6 KB

Pavel

More than a month ago #Permalink
How can i make the boxes with shorter text to have the same length than the one with the longest text?

Use the column background settings instead of the add-on background settings.

Pavel

More than a month ago #Permalink
there is a small problem with your CSS suggestion. When i apply the code, the section is about 20 px larger on the front and end.

Use this code to compensate.

.sppb-col-md-12 {
padding-right: 2.5px;
padding-left: 2.5px;
}

Learn css.;)

joeb1000

More than a month ago #Permalink
thank you again, but the whole procedure causes another problem: when you scroll a bit down there are three pictures in a row, they are not effected by the code to make the space of the blank rows between the pictures smaller. Can you suggest a more global css code that will effect all rows with more than one picture regardless where on the page they are located.

Your idea with using the column background color settings does not work as it takes away the white blank columns between the small pictures and also extends to the front and end of the section.

Pavel

More than a month ago #Permalink
thank you again, but the whole procedure causes another problem: when you scroll a bit down there are three pictures in a row, they are not effected by the code to make the space of the blank rows between the pictures smaller. Can you suggest a more global css code that will effect all rows with more than one picture regardless where on the page they are located.

Delete the previous code and paste this.

.sppb-col, .sppb-col-auto, .sppb-col-lg, .sppb-col-lg-1, .sppb-col-lg-10, .sppb-col-lg-11, .sppb-col-lg-12, .sppb-col-lg-2, .sppb-col-lg-3, .sppb-col-lg-4, .sppb-col-lg-5, .sppb-col-lg-6, .sppb-col-lg-7, .sppb-col-lg-8, .sppb-col-lg-9, .sppb-col-lg-auto, .sppb-col-md, .sppb-col-md-1, .sppb-col-md-10, .sppb-col-md-11, .sppb-col-md-12, .sppb-col-md-2, .sppb-col-md-3, .sppb-col-md-4, .sppb-col-md-5, .sppb-col-md-6, .sppb-col-md-7, .sppb-col-md-8, .sppb-col-md-9, .sppb-col-md-auto, .sppb-col-sm, .sppb-col-sm-1, .sppb-col-sm-10, .sppb-col-sm-11, .sppb-col-sm-12, .sppb-col-sm-2, .sppb-col-sm-3, .sppb-col-sm-4, .sppb-col-sm-5, .sppb-col-sm-6, .sppb-col-sm-7, .sppb-col-sm-8, .sppb-col-sm-9, .sppb-col-sm-auto, .sppb-col-xl, .sppb-col-xl-1, .sppb-col-xl-10, .sppb-col-xl-11, .sppb-col-xl-12, .sppb-col-xl-2, .sppb-col-xl-3, .sppb-col-xl-4, .sppb-col-xl-5, .sppb-col-xl-6, .sppb-col-xl-7, .sppb-col-xl-8, .sppb-col-xl-9, .sppb-col-xl-auto, .sppb-col-xs-1, .sppb-col-xs-10, .sppb-col-xs-11, .sppb-col-xs-12, .sppb-col-xs-2, .sppb-col-xs-3, .sppb-col-xs-4, .sppb-col-xs-5, .sppb-col-xs-6, .sppb-col-xs-7, .sppb-col-xs-8, .sppb-col-xs-9 {
padding-right: 2.5px;
padding-left: 2.5px;
}

Your idea with using the column background color settings does not work as it takes away the white blank columns between the small pictures and also extends to the front and end of the section.

In this case, fill in the CSS Class field for all add-ons and measure the height of the largest add-on, and write code focusing on this height.
For example:

.myClass {
min-height: 476px;
}

http://dl3.joxi.net/drive/2018/12/10/0008/0401/545169/69/3d7ba33b51.png


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Sifat

Sifat

Total Accepted Answers: 63
Toufiq

Toufiq

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 20
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303375

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

Cron Job Starts