Change Size of Twitter block on Mobile

Site URL: https://pumpkin-harp-dd4x.squarespace.com/

Hi everyone,

Just trying to figure our if there any way of making the Twitter block smaller on mobile? I have customised the bullet points for the site, but that means that the Twitter block now is too big for the mobile page. If not, is there a way to exclude the twitter block from the custom bullet points?

Thank you in advance to anyone that could point me in the right direction!

Password is oneadvisory

How did you create the bullet?

if you used CSS, wrap CSS in the below code

@media screen and (min-width:641px) {
paste your CSS here
}

On 3/28/2020 at 2:04 AM, tuanphan said:

How did you create the bullet?

if you used CSS, wrap CSS in the below code

@media screen and (min-width:641px) {
paste your CSS here
}

 

This is brilliant!!! Thank you so much! Works perfectly - the only thing is that now all the other custom bullet points disappear on mobile - is there any way of just affecting the twitter block? Sorry and thank you!

3 minutes ago, viccismarshall said:

This is brilliant!!! Thank you so much! Works perfectly - the only thing is that now all the other custom bullet points disappear on mobile - is there any way of just affecting the twitter block? Sorry and thank you!

Which code did you use?

2 minutes ago, tuanphan said:

Which code did you use?

@media screen and (min-width:641px) {
ul {list-style-type: none;}
ul[data-rte-list] li>*:first-child::before 
{content: " " !important;}  
ul li:before{
content: '';
display:inline-block;
background-image: url(https://static1.squarespace.com/static/5d8c929f2d89533d477b026f/t/5e60fc963720b572b5ccc364/1583414422430/OA+BUllet+Point.png);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
margin-left: -25px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
  }}

use

@media screen and (min-width:641px) {
div#page-5d938f39e29d4d5342072e38 {
    ul {list-style-type: none;}
    ul[data-rte-list] li>*:first-child::before 
      {content: " " !important;}  
      ul li:before{
      content: '';
      display:inline-block;
      background-image: url(https://static1.squarespace.com/static/5d8c929f2d89533d477b026f/t/5e60fc963720b572b5ccc364/1583414422430/OA+BUllet+Point.png);
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: center;
      width: 20px;
      height: 20px;
      position: absolute;
      margin-left: -25px;
      margin-right: 5px;
      margin-top: 5px;
      margin-bottom: 0px;
        }
	}
}

9 minutes ago, tuanphan said:

use

@media screen and (min-width:641px) {
div#page-5d938f39e29d4d5342072e38 {
    ul {list-style-type: none;}
    ul[data-rte-list] li>*:first-child::before 
      {content: " " !important;}  
      ul li:before{
      content: '';
      display:inline-block;
      background-image: url(https://static1.squarespace.com/static/5d8c929f2d89533d477b026f/t/5e60fc963720b572b5ccc364/1583414422430/OA+BUllet+Point.png);
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: center;
      width: 20px;
      height: 20px;
      position: absolute;
      margin-left: -25px;
      margin-right: 5px;
      margin-top: 5px;
      margin-bottom: 0px;
        }
	}
}

 

Hello,

Thanks so much for helping! When I add in the extra part, it seems to take away all of the other custom bullet points on both desktop and mobile as well as the Twitter block? Sorry!

edit 

div#page-5d938f39e29d4d5342072e38

to

div#block-yui_3_17_2_1_1569951547434_4889

Hello again, thank you so much for persisting with me!! I have just tried that edit, but the bullets still are missing on desktop and revert to standard on mobile? Sorry, the coding makes total sense, but doesn't seem to just target the twitter block!

Hi. Have you solved yet?

Hi Tuanphan, 

No, not yet! Any more good ideas? Thank you for following up!