Feature Box Conect Will Not Center Align - Question | JoomShaper

Feature Box Conect Will Not Center Align

RM

Ross McIntyre

SP Page Builder 2 years ago

I have a feature box with an icon and text. Despite the content align set to center. The icon and text are left aligned as visible at the foot of this page:

https://www.borderhighlands.com/events/enter-events-online/virtual-show

When I work on the frontend editor, the view is centered but on the live page render it remains left aligned.

Thanks Ross

0
13 Answers
RM
Ross McIntyre
Accepted Answer
2 years ago #25335

Meant to say content in the title

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #25340

Hi

Give me a screenshot of your issue please

0
RM
Ross McIntyre
Accepted Answer
2 years ago #25347

How do I do that on this forum?

0
Anne
Anne
Accepted Answer
Support Agent 2 years ago #25351

Hello Ross McIntyre,

Thanks for contacting with us. Please use a online screenshot taking tool like lightshot or https://imgur.com/upload

-Regards

0
RM
Ross McIntyre
Accepted Answer
2 years ago #25359
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #25490

Hi

Use this custom css


@media only screen and (max-width: 1024px) and (min-width: 768px)  {
#sppb-addon-1626533495492 h2.sppb-addon-title{
    position:relative;
    left:10px;
    white-space:nowrap;
}
}
@media only screen and (max-width: 1600px) and (min-width: 1024px)  {
#sppb-addon-1626533495492 h2.sppb-addon-title{
    position:relative;
    left:200px;
    white-space:nowrap;
}
}

@media (max-width: 767px){
#sppb-addon-1626533495492 h2.sppb-addon-title{
    position:relative;
    left:60px;

}
}

Add this css code inside the custom.css file. Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code. https://prnt.sc/pu705g https://prnt.sc/pu70zn In Extensions>Template> Template Options > Custom Code > Custom CSS please add this Thanks

0
Pavel
Pavel
Accepted Answer
2 years ago #25543

Hi. Mehtaz, it should be much easier. Use position: relative; in such cases is a very harmful advice. Crouch it out of your practice. Learn browser code inspector and Flexbox CSS at least.

For Icon

#sppb-addon-1626533495491 {
    text-align: center;
}

For text. All field values must be filled if at least one value is used. Can not be left empty

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #25550

Thanks Pavel

0
Pavel
Pavel
Accepted Answer
2 years ago #25552

You are always wellcome

0
RM
Ross McIntyre
Accepted Answer
2 years ago #25600

I appreciate these responses. I am not really skilled enough to understand how to implement them to solve the issue. I know this is my failing but any more pointers as to how to implement into my use case would be good.

Ross

0
Pavel
Pavel
Accepted Answer
2 years ago #25603

Hi. That which you specify is not the Feature Box addon. These are two different addons.

1 - FIX for the first addon

2 - FIX for the second addon

1 ) Add code here

2 ) Go to the Heading Addon settings > Style Tab > fill margin fields as on my screenshot above. Or OFF addon width option in Advanced Tab. Also set text center in General Tab

0
Pavel
Pavel
Accepted Answer
2 years ago #25604

Also, I noticed that the code of your template prevents the headlines to the SP Page Builder. Therefore, Text Center In General Tab does not help. You will have to add another line of the code to align the text in the center. Therefore, instead of code above, use this code.

#sppb-addon-1626533495491,
#sppb-addon-1626533495492 h2.sppb-addon-title {
    text-align: center;
}

After applying everything that is written above, you will get such a result.

0
Anne
Anne
Accepted Answer
Support Agent 2 years ago #25662

Hello Pavel,

Thanks for the explanation.

-Regards

0