Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 1, 2020 at 9:36 pm #1199881
    nolka

    Hi Guys
    I want to change the size of the bullets [not the text] in ul li – how can I achieve this?

    WordPress Web Hosting

    Kevin

    April 1, 2020 at 9:38 pm #1199882
    nolka

    I have changed the original bullets to squares just to see if it would look better but I cannot work out how to increase the size of the squares?
    Kevin.

    April 3, 2020 at 4:44 am #1200352
    Rikard

    Hi,

    That is not theme specific, it’s default html/css. If you want to style it differently then you can use an image instead for example: https://www.w3schools.com/CSS/css_list.asp, https://css-tricks.com/almanac/properties/l/list-style/

    Best regards,
    Rikard

    April 3, 2020 at 10:34 am #1200443
    nolka

    Hi Rikard
    I have changed it all back again to the standard circle/dot.
    However – I still want to increase the size of the actual bullet itself and not the font. How can I do that?

    Cheers.
    Kevin.

    April 3, 2020 at 10:11 pm #1200671
    Nikko

    Hi Kevin,

    The site you posted just have it’s ul’s font size set to 16.
    So if you add this CSS code in Quick CSS:

    #top ul {
  font-size: 16px;
}

    that should be similar to the site you gave.

    The other method would be to use the :before selector.
    – https://www.w3schools.com/cssref/sel_before.asp

    Best regards,
    Nikko

    April 6, 2020 at 11:15 am #1201185
    nolka

    Hi Nikko
    No – that did not work – it changed the size of the circle “.” but also changed the size of the text – which is what I do not want. I just want to make the actual circle part of the bullet “.” a different size and not affect the actual text itself – so just the “.” part only.

    Kevin.

    April 6, 2020 at 10:17 pm #1201394
    Nikko

    Hi Kevin,

    Can you try adding this CSS code instead: (just adjust the width and height value as you see fit)

    #top ul {
    list-style: none;
}

#top ul li {
    padding-left: 20px;
    position: relative;
}

#top ul li:before {
    background-color: black;
    content: '';
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 11px;
    height: 10px;
    width: 10px;
}

    Best regards,
    Nikko

    April 7, 2020 at 11:59 am #1201560
    nolka

    Thanks Nikko
    I tried that and it technically worked BUT it then added the circles to the section below on the tables – where there were NO circles previously – I have left this on for you to see…
    Any ideas?
    Kevin

    April 8, 2020 at 7:53 pm #1201997
    Nikko

    Hi Kevin,

    I see, please add this CSS code as well:

    #top .pricing-table-wrap ul li:before {
  display: none;
}

    Best regards,
    Nikko

    April 8, 2020 at 8:18 pm #1202006
    nolka

    Thanks Nikko
    That has worked perfectly… much appreciated – you and the team:)
    Kevin

    April 8, 2020 at 10:02 pm #1202028
    Nikko

    Hi Kevin,

    We’re glad to hear that :)
    Thanks for Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change Bullet size in enfold’ is closed to new replies.