[NaturalifeParticipant]

This is turning out to be more work than expected!

Anyways, that seems to have no effect on the bullet list when I add “bulletclass” to the class section in visual composer on both a container and content band with text within. Perhaps I am doing this wrong? I would like to avoid the manual html because it would take too much time to do every time I need to write up a bullet list.

Also, I noticed that the bulleted lists in mobile view have a larger font and bigger line spacing for some reason. Is there any way to fix this?

Both of these issues can be seen on the most recently published post.

[ChristopherModerator]

Hi there,

Please remove this class from content band or container.

Although you added ‘bulletclass’ to your unordred list but you didn’t add style to this class.

Please add this :

.bulletclass li {
       padding-bottom: 20px;
}

Bullet use the same font size and line height for all devices, if you want to change it please add this CSS as well :

@media (max-width:767px){
.bulletclass li {
    font-size: 12px;
    line-height:1;
}
}

Hope it helps.

[NaturalifeParticipant]

Still no luck with the bullet list padding-bottom.

I added the code you provided (without the mobile resizing code) and still have no luck. I tried containers with and without the bulletclass class and see no results.

Also, you mentioned that the font size is the same for all devices? Do you have any idea why bullet lists would appear larger in mobile view then?

Here is a screenshot of what it looks like: http://postimg.org/image/rn9298obn/

I suppose if I could find the issue at hand, it would be better than adding more code. If not, then I will give the second code you provided a try.

Thank you for the help!

[Rue NelModerator]

Hello There,

It seems that the font size of the bullet list has change. To prevent that, please update your code;

.bulletclass ul{
    margin-left: 10px;
}

.bulletclass li {
    padding-bottom: 30px;
    list-style-position: outside;
    font-size: 0.88em;
}

Please let us know if this works out for you.

[NaturalifeParticipant]

Thank you. I will give that a try but this doesnt’ do anything for me if I cannot properly apply bulletclass to a list. I have still been unsuccessful in doing so as stated in my previous post.

Would this code be added within this:

@media (max-width:767px){
.bulletclass li {
    font-size: 12px;
    line-height:1;
}
}

Thanks for the help.

[RadModerator]

Hi there,

I checked and it’s working okay, perhaps, I’m looking on different area. If youn wish, you can make this syling global without a class.

@media (max-width:767px){
ol li {
    font-size: 12px !important;
    line-height:1 !important;
}
}

Please also note that you have existing styling that adds spacing,

@media (max-width: 480px) {
ol li {
    padding-bottom: 30px !important;
}
}

That’s the reason your spacing isn’t working using the class name.

Would you mind providing the exact URL that has this issue?

Thanks!

[NaturalifeParticipant]

I feel as if this code has gotten quite messy as I am a novice with CSS.

I did a search and find function and did not find the code you mentioned that adds spacing in my custom CSS.

I added the code you mentioned but the bullet list text and spacing still remains larger on mobile view.

Lastly, I still have not been able to achieve a bottom padding on bullet lists in desktop view. An example can be found here: http://naturalife.org/health/antibiotics-linked-to-allergies/

Should I now remove the bulletlist CSS class since it was not working for me?

Thanks for the help.

[FriechModerator]

Hi There,

Perhaps, you might need to check your custom css here: http://csslint.net/ address the errors. Most probable a missing curly braces or a misplaced curly braces.

You need to increase each list items vertical spacing, like the screenshot below?

Then the code is:

.single ul li {
    margin-bottom: 35px !important;
}

If you need to apply this only on mobile, enclosed it with a @media query

@media (max-width:  767px) {
	.single ul li {
    margin-bottom: 35px !important;
}
}

Hope this shed some lights.

Cheers!

[NaturalifeParticipant]

Thank you! I have some progress.

I got the list to work in desktop view and I can successfully modify it to my liking.

Unfortunately I was unsuccessful in modifying the mobile bullet list dimensions.

Would you mind looking at the very bottom of my custom CSS and seeing what could be wrong?

Once I get this, everything will be all set!

[FriechModerator]

Hi There,

The real issue here is there are syntax errors on your custom css and those repeating rules did not help your case. I saw you declared this style.

.single ul li { 
    margin-bottom: 30px !Important;
  }

And again this:

.single ul li {
    margin-bottom: 16px !important;
}

And did you know that you can enclose those same width media query in one block?

e.g.

/*Large*/
@media (max-width:  979px) {
	/*ALL CSS RULES FOR TABLET GOES HERE*/
}

/*Medium*/
@media (max-width:  767px) {
	/*ALL CSS RULES FOR MOBILE PHONE GOES HERE*/
}

/*Small*/
@media (max-width:  480px) {
	/*ALL CSS RULES FOR SMALL PHONE GOES HERE*/
}

So I did take time to rearrange your whole CSS

/*Global headings*/
h1,
.h1 {
  font-size: 190%;
  line-height: 38px;
  line-height: 1.9;
}
h2,
.h2 {
  font-size: 180%;
  line-height: 1.4;
  bottom-margin: 60px;
}
.single-post h3 {
  font-size: 140% !important;
}
h4,
.h4 {
    line-height: 25px;
  font-size: 125%
}

h5,
.h5 {
  font-size: 125%
}

.blog .entry-title a, .single .entry-title {
  line-height: 1.3;
        margin-top: -20px;
        margin-bottom: 20px;

}

.page-id-506 .site  {  background-color: #eff1f7;
 }

.iconlist i {
  color: green;
  font-size: 28px;
}

.touchevents a.x-scroll-top {display: none;}

.page-id-506 .x-breadcrumb-wrap {
display: none; 
}
/*
// Buttons.
*/

.x-btn-alt-light {
  color: #fff;
  border-color: #fff;
}

.x-btn-alt-light:hover {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.75);
}

.x-btn-alt-dark {
  color: #434f5b;
  border-color: #434f5b;
}

.x-btn-alt-dark:hover {
  color: rgba(67, 79, 91, 0.75);
  border-color: rgba(67, 79, 91, 0.75);
}

.h-custom-headline.accent span:before, .h-custom-headline.accent span:after {
border-top: 3px solid #000 !important;
border-bottom: 2px solid #000 !important;
}

/* background color of topbar */
.x-topbar {
    background-color: #279044;
}

/* social icons color */
.x-topbar .x-social-global a {
    color: #8fbc8f;
}

/* hover color of social icons */
.x-topbar .x-social-global a:hover {
    color: #ffffff;
}

/* change color of links and remove dotted border */
.x-topbar .p-info a, .x-topbar .p-info {
    color: #8fbc8f;
    border:none
}

/* Hover color of topbar links */
.x-topbar .p-info a:hover {
    color: #ffffff;
}

body .x-topbar .p-info,
body .x-topbar .p-info a {
    color:#fff;
}
.x-social-global a {
  color: #b5ddbf;
}
.x-topbar .p-info {
  letter-spacing: 1px;
  font-size: .7em;
}
.x-topbar .p-info .top-link:hover {
    color: #b5ddbf;  
}

body .x-topbar .p-info a {border-width: 0;}

/*
// Landmark header.
*/

.x-header-landmark {
  padding: 45px 0;
  border-color: #e4e1d0;
  background-color: #e4e1d0;
}

.x-header-landmark h1.h-landmark {
  font-size: 200%;
  letter-spacing: 3px;
}

/*
// Content headings.
*/

.entry-title {
  font-size: 200%;

}

.h-widget {
  font-size: 112%;
}

/*
// Custom promo.
*/

.promo-custom {
  margin: 0 auto;
  max-width: 320px;
}

.promo-custom h4 {
  margin: 0;
  margin-bottom: 5px;
  font-size: 1.15em;
}

.promo-custom p {
  margin: 0.75em 0 1.15em;
  font-size: 0.85em;
}

.promo-custom p:last-child {
  margin-bottom: 0;
}

body.blog,
body.archive,
body.single-post {
  background-color: #f4f5f9;
  line-height: 32px;
  
}

.main-font {
  font-family: Merienda One;
}
/*
// Footer.
*/

footer p,
footer h4 {
  color: #9d9d9d;
}

footer a {
  color: #b5b3b3;
}

footer a:hover {
  color: #279044;
}

footer .footer-services {
  font-size: 16px;
  letter-spacing:0;
  color: #d1d1d1;
}

footer .footer-credit {
  font-family: "Montserrat", sans-serif;
}

/*
// Quotes
*/

.x-blockquote {
  font-family: Lato;
  font-size: 1.4em;
}

.x-blockquote .x-cite {
  font-family: Lato;
  font-size: 1.0em;
}

.single ul li {
    margin-bottom: 16px !important;
}

/*Medium*/
@media (max-width:  767px) {
      body #tve_one_set .thrv-leads-form-box h2, .blog .entry-title a, .single .entry-title, h2 {line-height: 1.13;}
  .single .entry-content p {font-size: 0.96em; line-height: 1.75;}
      body.blog .entry-title a, .single .entry-title {font-size: 1.6em;}
      body.blog, .single, h2 {font-size: 1.35em;}
      .x-topbar .p-info {
        background-color: transparent;
    }
   .single ul li {
      margin-bottom: 16px !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
  }
  ol li {
      font-size: 12px !important;
      line-height:1 !important;
  }
}

/*Small*/
@media (max-width:  480px) {
   blockquote.x-blockquote {
        font-size: 16px !important;
    }

  blockquote.x-blockquote {
    background-color: #FFFFFF;
    border: 1px solid #272727;
    border-left: 0;
    border-right: 0;
  }

  .x-code {
    background-color: #fff;
  }

  ol li {
    padding-bottom: 30px !important;
  }

  .single ul li { 
    margin-bottom: 30px !Important;
  }
}

But! keep in mind that those rules before that was not working because of the syntax error, would actually worked now. So this could make or break your site, backup your custom css if you want to try this.

OR

The immediate solution to your issue is adding a padding bottom for each list item on mobile view in addition to the bottom margin that we can not overwrite because of the syntax errors.

@media (max-width: 480px)
.single ul li {
    padding-bottom: 15px;
}

Either way, hope it helps.

Cheers!

[NaturalifeParticipant]

WOW THANKS!

That really helped.

The only thing I can’t seem to figure out now is where to edit the mobile font size for my blog posts in this code (if it exists).

Could you kindly direct me?

THanks

[FriechModerator]

Hi There,

Glad that helps. It is this code that is under @media (max-width: 767px) block.

.single .entry-content p {font-size: 0.96em; line-height: 1.75;}

Specifically the font-size: 0.96em attribute.

I notice the list font is small. If you need to adjust that the code is:

.single ul li {
      margin-bottom: 16px !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
  }

It is also under the @media (max-width: 767px)

Hope it helps, Cheers!

[NaturalifeParticipant]

That helped thanks!

I noticed that the block quotes are still really large on mobile view. I tried to add code to modify its size and line spacing but have had no success.

I added this:

.x-blockquote .x-cite {
font-family: Lato;
font-size: .98em !important;
line-spacing: 1;
}
.x-blockquote {
font-family: Lato;
font-size: .98em !Important;
}
}

[LelyModerator]

Hello There,

It is not working because it encountered an error. There’s no line spacing property in CSS. It should be line-height and not line-spacing. When CSS encountered line-spacing, it doesn’t recognize this property thus throwing a syntax error. This will make CSS added after this line not to work.

Hope this helps.

[NaturalifeParticipant]

Thank you for the suggestion.

I made the suggested changes but I am still not seeing any changes in the mobile sizing. Perhaps there is another issue with the CSS? I’m not sure what else it could be. I have tried clearing the cache too.

Thanks!

[Author]

Posts