Jump to content

Change Size of Twitter block on Mobile

Recommended Posts

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

 

mobile twitter off screen.png

Link to comment
  • Replies 10
  • Views 684
  • Created
  • Last Reply
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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
  }}

Link to comment

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;
        }
	}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

before.png

After.png

mobile.png

Link to comment
  • 4 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.