How to center + reduce text size on announcement bar (for mobile only)

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

Hello! My announcement bar has text that's right aligned for desktop view, but I want this text to be centered & made slightly smaller for the mobile view. Text should stay as-is for the desktop view and only be adjusted for the mobile view. 

Can you kindly tell me what the code is to adjust the text on mobile view? 

3 hours ago, KLantz said:

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

Hello! My announcement bar has text that's right aligned for desktop view, but I want this text to be centered & made slightly smaller for the mobile view. Text should stay as-is for the desktop view and only be adjusted for the mobile view. 

Can you kindly tell me what the code is to adjust the text on mobile view? 

Check this in Design->Custom CSS

@media screen and (max-width: 640px) {
  .sqs-announcement-bar-text {
        padding: .8em 1em;
  }
  .sqs-announcement-bar p {
    	display: flex;
    	align-items: flex-start;
  }
  .sqs-announcement-bar-text p > a{
        width: 25%;    
    	font-size: 0.7rem;
    	display: inline-block;
  }
}

Thank you!!!

@KLantz On mobile, I think you can consider convert clients we work with to 2 logos/row, it will be better.

If you want, use this CSS

@media screen and (max-width:767px) {
div#page-section-5f56951efab9b365a26c9902>.row:nth-child(2)>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f56951efab9b365a26c9902>.row:nth-child(2)>.span-2:nth-child(2n+1) {
    clear: left;
}
}

Hi there @tuanphanor @bangank36

I can change the font size in my mobile view announcement bar, but how do i reposition the 'x' button? (to centre align it in the announcement bar section and move it a bit to the right)

Can you please help?

https://deep-learning-cafe.squarespace.com/

password: password123

3 hours ago, IwanJ said:

Hi there @tuanphanor @bangank36

I can change the font size in my mobile view announcement bar, but how do i reposition the 'x' button? (to centre align it in the announcement bar section and move it a bit to the right)

Can you please help?

https://deep-learning-cafe.squarespace.com/

password: password123

You can try

.sqs-announcement-bar-close {
  top: 50%;
  transform: translateY(-50%);
}

Let me know how it works on your site

It certainly does! Thank you so much @bangank36 😀