Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


KLantz

Question

3 answers to this question

Recommended Posts

  • 0
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? 

IMG_7863.jpg

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

image.png.87e9fdefb52fe06ba5a262aa4e5e81d7.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...