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
Meant to say content in the title
Hi
Give me a screenshot of your issue please
How do I do that on this forum?
Hello Ross McIntyre,
Thanks for contacting with us. Please use a online screenshot taking tool like lightshot or https://imgur.com/upload
-Regards
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
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
Thanks Pavel
You are always wellcome
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
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
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.
Hello Pavel,
Thanks for the explanation.
-Regards