Custom bullet points change colour when viewed on mobile

Site URL: https://www.newworkmasterskills.com/

Hello,

I have added custom CSS to edit the bullet point shape and colour. On desktop view they appear the correct colour (white), but on mobile view they appear in black - regardless of the colour theme for the block.

Is anyone able to help with this?

Thanks

1 hour ago, JonnyDavidson said:

Site URL: https://www.newworkmasterskills.com/

Hello,

I have added custom CSS to edit the bullet point shape and colour. On desktop view they appear the correct colour (white), but on mobile view they appear in black - regardless of the colour theme for the block.

Is anyone able to help with this?

Thanks

Hi , It appears to be correct color(white) on mobile as well, I think you have manage to fix it.

I am having the same issue. On my homepage in desktop view (https://www.designinginsights.com/), the bullets appear in white, but in mobile view, they are black. 

Try adding to Design > Custom CSS

ul[data-rte-list] li>*:first-child::before {
    color: white !important;
    background-color: white !important;
}

Hi @tuanphan! 

I'm having a similar issue with this site, along with a few other code questions. 

www.extiparadox.com

1. Checkmark bullet points on home page turn grey on mobile iPhone despite having applied the code format above. They look correct, lime green, on desktop and in the mobile preview. 

2. This site was developed by someone else and I'm trying to correct a few errors. The newsletter block "email address" input on mobile is shorter than the button. Can you help me with the correct code to add so that they input field and the button are the same width? There are multiple instances of this throughout the site. 

Thank you so much! 

On 7/18/2024 at 3:19 AM, ChristinaDean said:

Hi @tuanphan! 

I'm having a similar issue with this site, along with a few other code questions. 

www.extiparadox.com

1. Checkmark bullet points on home page turn grey on mobile iPhone despite having applied the code format above. They look correct, lime green, on desktop and in the mobile preview. 

2. This site was developed by someone else and I'm trying to correct a few errors. The newsletter block "email address" input on mobile is shorter than the button. Can you help me with the correct code to add so that they input field and the button are the same width? There are multiple instances of this throughout the site. 

Thank you so much! 

Can you check domain name? I can't access it now

www.exitparadox.com is live now. 🙂 

On 7/23/2024 at 9:34 PM, ChristinaDean said:

www.exitparadox.com is live now. 🙂 

#1. Do you use Personal or Business Plan? I think we can try use FontAwesome Icon.

#2. Try this to Custom CSS box

@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-button-wrapper>button {
    width: 250px !important;
}

.newsletter-block .newsletter-form-body .newsletter-form-fields-wrapper {
    width: 250px !important;
    overflow: hidden;
}
}

1. Business plan  -- how would we use an Icon? Is there a different CSS code I would need for that? 

2. Thanks for trying -- that code didn't work. I think there is too much other newsletter block code already in the CSS section from a previous developer. 

I appreciate the help!  🙂 

On 7/26/2024 at 2:24 AM, ChristinaDean said:

1. Business plan  -- how would we use an Icon? Is there a different CSS code I would need for that? 

2. Thanks for trying -- that code didn't work. I think there is too much other newsletter block code already in the CSS section from a previous developer. 

I appreciate the help!  🙂 

#1. First, use this code to Code Injection > Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Next, use this code to Custom CSS box

div.html-block .sqs-html-content ul li p:before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free";
    font-weight: bold !important;
    color: lime;
}

#2. Can you keep CSS code in CSS box? I can check again easier

@tuanphan THANK YOU SO MUCH!! How amazing! it worked. 🙂 You're a genius....  If I may pick your brain...

1. I'm trying to resize the newsletter email input boxes to be the same width as the subscribe buttons and have them be perfectly center aligned on mobile. The previous designer customized these throughout the site and they look off (especially on mobile).  Would really appreciate any input or advice on how to correct these. There's at least one on every page.  

The problem is that it looks perfect in preview/edit mode in SQS, but on the live site, everything is shifted - especially mobile view. See screenshots from this page: You can also see an iPad screenshot where the input field looks very wonky. 

2. I don't seem to be able to shrink the size of the actual text "Yes please!" or "Go to Podcast" in the button -- when I do alter the "font-size" input, only the arrow box changes. The client would like this font smaller across the site (except for the header).

On 8/6/2024 at 5:52 AM, ChristinaDean said:

@tuanphan THANK YOU SO MUCH!! How amazing! it worked. 🙂 You're a genius....  If I may pick your brain...

 

1. I'm trying to resize the newsletter email input boxes to be the same width as the subscribe buttons and have them be perfectly center aligned on mobile. The previous designer customized these throughout the site and they look off (especially on mobile).  Would really appreciate any input or advice on how to correct these. There's at least one on every page.  

 

The problem is that it looks perfect in preview/edit mode in SQS, but on the live site, everything is shifted - especially mobile view. See screenshots from this page: You can also see an iPad screenshot where the input field looks very wonky. 

 

2. I don't seem to be able to shrink the size of the actual text "Yes please!" or "Go to Podcast" in the button -- when I do alter the "font-size" input, only the arrow box changes. The client would like this font smaller across the site (except for the header).

 

 

#1. You can use this to Custom CSS box. You can reduce 90% to width what you want.

@media screen and (max-width:767px) {
div#block-df9213a9314e0d65f241 {
.newsletter-block .newsletter-form-body {
    align-items: center;
}
.newsletter-form-body>* {
    width: 90% !important;
}
.newsletter-form-body>*>* {
    width: 100% !important;
}
}}

#2. To change button text size, use CSS code like this

span.newsletter-form-button-label {
    font-size: 30px !important;
}