Formatting text

Shapely
1

Hi there

Sorry - another text formatting question . . .

Para text formatting seems to be slightly different when placed into lists. How can :

  1. I ensure that text is formatted the same in <p> and ordered/unordered lists (lists are displaying bigger text at the mo)
  2. Format text used for lists.

For example when on mobile the following page displays different size text; the text is bigger in the accordion ‘Breakfast Sides’ that it is in the accordion ‘Breads & Pastries’. The only difference is that the ‘Breakfast Sides’ is a list.

See - http://www.pm2-workbench.com/StopTheWorldCafe/food-drink/

Cheers

2

Hello,

I hope you are doing well today.

The text in the accordion seems to be fine.
Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

3

Hi there

Did you check on mobile?

Link - as above See – http://www.pm2-workbench.com/StopTheWorldCafe/food-drink/

Cheers

4

See here a capture of two accordion elements open.

The text at the bottom is bigger. I need to be able to format this unordered list so it matches the ‘paragraph’ text.

Cheers

5

hey there

Please add this CSS in appearance - customize - additional CSS

.sow-accordion-panel-border p {
color: #2d2d2d;
font-weight: bold !important;
}

Thanks!
Colorlib Support Team

6

Thanks for looking.

Not working as yet I’m afraid. I’m seeing no changes in results on mobile.

Text under the accordion - ‘Breakfast Sides’ (which uses bullets) still much bigger than text under other accordions (that don’t use bullets).

Cheers

7

Hello,

I hope you are doing well today.

You can use the following CSS code to change the font size by going to Appearance > Customize > Additional CSS and pasting it there.


.sow-accordion-panel-border {
    font-size: 12px;
}

Best Regards,
Support

8

Hi there

That fix sorts out the size issue but in doing so it has made all the text the same ‘strength’ the bold definitions no longer show. in fact the text all looks bold now?

Many thanks

9

Hello,

Changing the font size will do that as some of the fonts seemed to be using different sizes.

Another option is to only change the font size for the breakfast sides :


.so-widget-sow-accordion-default-45b2c03d0df5 .sow-accordion .sow-accordion-panel .sow-accordion-panel-content .sow-accordion-panel-border {
    font-size: 12px;
}

Best Regards,
Support

10

Thanks but why are there different sizes? All fonts are ‘paragrapgh’.

Why is it that there are different font treatments for lists vs normal text? Maybe approaching it that way would be better, rather than local changes to elements or force fitting font sizes.

If you go to the following page you will text on a simple page, in a para and in a list. They are formatted differently where they should be the same?

http://www.pm2-workbench.com/StopTheWorldCafe/test/

Thanks for your help

11

Hello,

This is not uncommon to have the list use a different font to distinguish it from the other text, this is more of a stylistic choice as some users won’t like to see the fonts having the same attributes.

Best Regards,
Support

12

Thanks but I need a fix. The suggested ideas aren’t working. They are removing any bold/strong formatting I have placed.

If it is not uncommon why isn’t there a way within word press to format lists?

Cheers

13

Hello,

There is not a way to change this in WordPress because CSS would have to be used to change the font attributes. Also, this accordion is built with the Site Origin page builder so you would have to add the CSS to the specific widget to change it.

Best Regards,
Support

14

I don’t think the issue is to do with SiteOrigin Accordion. It’s an issue across the site.

Attached is an image of a plain page using bullets and the issue persists on mobile.

15

Hello

Default list item formatting can be changed by this css:

.entry-content li {
font-weight: 400;
}

16

Hi

Thanks for the latest fix.

Unfortunately it’s still not working (see attached from chrome on mobile in incognito mode).

Any idea why lists aren’t being formatted properly on mobile?

17

Good morning

Sorry but css is working, code i provided supposed to make the text less bold and its working, are you asking something else? you can add new css rules in the code if you wish

18

Hi there

Thanks for looking again.

I think we might be going round in circles a bit.

The issue is that the text is a different size in the unordered list when compared to body text on mobile.

In some of the original suggested fixes the size was fixed but in doing so I could not apply bold to thR text.

Here I can apply bold, you’re right, it the size isn’t fixed.

Can you help me fix both the size so it’s the same in a bullet and not in a bullet and so that I can apply bold.

Cheers

19

Hello,

Please remove the CSS that we added to make any changes so that we can start from scratch.

Best Regards,
Support

20

Thanks

I’ve removed all previous fixes.

I’d like text across the site to look similar on mobile.

As said at the moment unordered lists show up differently on mobile to body/paragraph text.

Suggested fixes have handled font size but removed ability to have certain elements in bold. So can’t be used.

Appreciate your help.

See previous attachment for the issue.